Skip to content

Datagrid component redesign #2215

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Mil4n0r merged 18 commits into from
May 29, 2025
Merged

Datagrid component redesign #2215

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
c20f086
Datagrid component redesign
Jialecl Apr 21, 2025
0e3f47e
moved document to the component
Jialecl Apr 21, 2025
f7822b9
datagrid test fixed due to document
Jialecl Apr 22, 2025
dfb8a2b
ThemeProvider removed
Jialecl Apr 22, 2025
8dd860c
Merge branch 'master' of https://github.com/dxc-technology/halstack-r…
Jialecl Apr 29, 2025
5f75deb
Datagrid documentation
Jialecl Apr 30, 2025
6d648b8
testing delay to fix snapshots
Jialecl Apr 30, 2025
2ede707
delay increased
Jialecl Apr 30, 2025
4b75804
restructuring visual tests
Jialecl Apr 30, 2025
13a6f66
Visual tests commented
Jialecl Apr 30, 2025
d90d36f
Adding back some tests
Jialecl Apr 30, 2025
97c35bc
uncommenting all tests
Jialecl Apr 30, 2025
fa5eb16
removed unnecessary tests
Jialecl Apr 30, 2025
15ad42b
Documentation fixes based on review
Jialecl May 2, 2025
a2b8e5f
Merge branch 'master' into jialecl-datagrid
Jialecl May 2, 2025
ef98839
Hierarchical data added to documentation
Jialecl May 29, 2025
3cf85db
Merge branch 'master' of https://github.com/dxc-technology/halstack-r…
Jialecl May 29, 2025
08cfafd
commenting scrollable test
Jialecl May 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions apps/website/pages/components/data-grid/code.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import Head from "next/head";
import type { ReactElement } from "react";
import DataGridCodePage from "screens/components/data-grid/code/DataGridCodePage";
import DataGridPageLayout from "screens/components/data-grid/DataGridPageLayout";

const Code = () => {
return (
<>
<Head>
<title>Data grid — Halstack Design System</title>
</Head>
<DataGridCodePage />
</>
);
};

Code.getLayout = (page: ReactElement) => <DataGridPageLayout>{page}</DataGridPageLayout>;
export default Code;
16 changes: 6 additions & 10 deletions apps/website/pages/components/data-grid/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,18 @@
import Head from "next/head";
import type { ReactElement } from "react";
import DataGridCodePage from "screens/components/data-grid/code/DataGridCodePage";
import DataGridPageLayout from "screens/components/data-grid/DataGridPageLayout";
import DataGridOverviewPage from "screens/components/data-grid/overview/DataGridOverviewPage";


const Usage = () => {
const Index = () => {
return (
<>
<Head>
<title>Data Grid — Halstack Design System</title>
<title>Data grid — Halstack Design System</title>
</Head>
<DataGridCodePage />
<DataGridOverviewPage />
</>
);
};

Usage.getLayout = function getLayout(page: ReactElement) {
return <DataGridPageLayout>{page}</DataGridPageLayout>;
};

export default Usage;
Index.getLayout = (page: ReactElement) => <DataGridPageLayout>{page}</DataGridPageLayout>;
export default Index;
21 changes: 0 additions & 21 deletions apps/website/pages/components/data-grid/specifications.tsx
View file
Open in desktop

This file was deleted.

21 changes: 0 additions & 21 deletions apps/website/pages/components/data-grid/usage.tsx
View file
Open in desktop

This file was deleted.

13 changes: 5 additions & 8 deletions apps/website/screens/components/data-grid/DataGridPageLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,8 @@ import { ReactNode } from "react";

const DataGridPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
{ label: "Code", path: "/components/data-grid" },
{ label: "Usage", path: "/components/data-grid/usage" },
{ label: "Specifications", path: "/components/data-grid/specifications" },
{ label: "Overview", path: "/components/data-grid" },
{ label: "Code", path: "/components/data-grid/code" },
];

return (
Expand All @@ -23,12 +22,10 @@ const DataGridPageHeading = ({ children }: { children: ReactNode }) => {
closable={false}
/>
<DxcParagraph>
A data grid is a component designed to display large volumes in a structured and organized manner. It
structures data into rows and columns, making it easy for users to visualize, analyze, and interact with the
information. The data grid also improves user experience by providing features like sorting, filtering, and
editing.
The datagrid component is used to display and manage large sets of data in a tabular format, allowing users
to sort, filter, and interact with the data efficiently.
</DxcParagraph>
<TabsPageHeading tabs={tabs}></TabsPageHeading>
<TabsPageHeading tabs={tabs} />
</DxcFlex>
</PageHeading>
{children}
Expand Down
Loading