Data Grid

warning

There are known styling issues with sortable columns when used in a NextJS app.

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.

Code

Usage

Specifications

Props

Name	Type	Description	Default
Required columns	`GridColumn[]`being `GridColumn`: `{ key: string; label: string; resizable?: boolean; sortable?: boolean; draggable?: boolean; textEditable?: boolean; summaryKey?: string; alignment?: "left" \| "right" \| "center"; }`	Each `GridColumn` object has the following properties: key: Key that will be rendered from each row in `rows`. label: Label that will be used for the column header. resizable: Whether the column is resizable or not. sortable: Whether the column is sortable or not. draggable: Whether the column can be dragged or not to another position or not. textEditable: Whether the column cells are editable or not. summaryKey: Value that will be rendered from the `summaryRow` alignment: Sets the alignment inside the cells.	-
Required rows	`GridRow[] \| HierarchyGridRow[] \| ExpandableGridRow[]` Each one of them being in order: `{ [key: string]: React.ReactNode \| undefined; }` `GridRow & { childRows?: HierarchyGridRow[] \| GridRow[]; }` `GridRow & { expandedContent?: React.ReactNode; expandedContentHeight?: number; }`	List of rows that will be rendered in each cell based on the `key` in each column.	-
expandable	`boolean`	Whether the rows can expand or not.	-
summaryRow	`GridRow`	Extra row that will be always visible.	-
selectable	`boolean`	Whether the rows are selectable or not.	-
selectedRows	`Set<string \| number>`	Set of selected rows. This prop is mandatory if `selectable` is set to true. The `uniqueRowId` key will be used to identify the each row.	-
onSelectRows	`(selectedRows: Set<number \| string>) => void`	Function called whenever the selected values changes. This prop is mandatory if `selectable` is set to true.The `uniqueRowId` key will be used to identify the rows.	-
uniqueRowId	`string`	This prop indicates the unique key that can be used to identify each row. This prop is mandatory if `selectable` is set to true, `expandable` is set to true or `rows` is of type `HierarchyGridRow[]`.	-
onGridRowsChange	`(rows: GridRow[] \| HierarchyGridRow[] \| ExpandableGridRow[]) => void`	Function called whenever a cell is edited.	-

Examples

Basic usage

() => {
  const columns = [
    {
      key: "id",
      label: "ID",
      resizable: true,
      draggable: true,
    },
    {
      key: "complete",
      label: "% Complete",
      resizable: true,
      draggable: true,
      alignment: "right",
    },
  ];
  
  const rows = [
    {
      id: "Row 1",
      complete: 46, 
    },
    {
      id: "Row 2",
      complete: 51,
    },
    {
      id: "Row 3",
      complete: 40,
    },
    {
      id: "Row 4",
      complete: 10,
    },
  ];
  
  return (
    <DxcInset space="2rem">
      <DxcDataGrid columns={columns} rows={rows} uniqueRowId="id" />
    </DxcInset>
  );
}

() => {
  const columns = [
    {
      key: "id",
      label: "ID",
      resizable: true,
      draggable: true,
    },
    {
      key: "complete",
      label: "% Complete",
      resizable: true,
      draggable: true,
      alignment: "right",
    },
  ];
  
  const rows = [
    {
      id: "Row 1",
      complete: 46, 
    },
    {
      id: "Row 2",
      complete: 51,
    },
    {
      id: "Row 3",
      complete: 40,
    },
    {
      id: "Row 4",
      complete: 10,
    },
  ];
  
  return (
    <DxcInset space="2rem">
      <DxcDataGrid columns={columns} rows={rows} uniqueRowId="id" />
    </DxcInset>
  );
}

Selectable data grid

() => {
  const columns = [
    {
      key: "id",
      label: "ID",
      resizable: true,
      draggable: true,
    },
    {
      key: "complete",
      label: "% Complete",
      resizable: true,
      draggable: true,
      alignment: "right",
    },
  ];
  
  const rows = [
    {
      id: "Row 1",
      complete: 46, 
    },
    {
      id: "Row 2",
      complete: 51,
    },
    {
      id: "Row 3",
      complete: 40,
    },
    {
      id: "Row 4",
      complete: 10,
    },
  ];
  
  const [selectedRows, setSelectedRows] = useState(new Set());
  return (
    <DxcInset space="2rem">
      <DxcDataGrid
          columns={columns}
          rows={rows}
          uniqueRowId="id"
          selectable
          selectedRows={selectedRows}
          onSelectRows={setSelectedRows}
        />
    </DxcInset>
  );
}

() => {
  const columns = [
    {
      key: "id",
      label: "ID",
      resizable: true,
      draggable: true,
    },
    {
      key: "complete",
      label: "% Complete",
      resizable: true,
      draggable: true,
      alignment: "right",
    },
  ];
  
  const rows = [
    {
      id: "Row 1",
      complete: 46, 
    },
    {
      id: "Row 2",
      complete: 51,
    },
    {
      id: "Row 3",
      complete: 40,
    },
    {
      id: "Row 4",
      complete: 10,
    },
  ];
  
  const [selectedRows, setSelectedRows] = useState(new Set());
  return (
    <DxcInset space="2rem">
      <DxcDataGrid
          columns={columns}
          rows={rows}
          uniqueRowId="id"
          selectable
          selectedRows={selectedRows}
          onSelectRows={setSelectedRows}
        />
    </DxcInset>
  );
}

Expandable data grid

() => {
  const columns = [
    {
      key: "id",
      label: "ID",
      resizable: true,
      draggable: true,
    },
    {
      key: "complete",
      label: "% Complete",
      resizable: true,
      draggable: true,
      alignment: "right",
    },
  ];
  
  const rows = [
    {
      id: "Row 1",
      complete: 46,
      expandedContent: "Expanded content"
    },
    {
      id: "Row 2",
      complete: 51,
      expandedContent: "Expanded content",
      expandedContentHeight: 100
    },
    {
      id: "Row 3",
      complete: 40,
    },
    {
      id: "Row 4",
      complete: 10,
    },
  ];
  
  return (
    <DxcInset space="2rem">
      <DxcDataGrid columns={columns} rows={rows} expandable uniqueRowId="id" />
    </DxcInset>
  );
}

() => {
  const columns = [
    {
      key: "id",
      label: "ID",
      resizable: true,
      draggable: true,
    },
    {
      key: "complete",
      label: "% Complete",
      resizable: true,
      draggable: true,
      alignment: "right",
    },
  ];
  
  const rows = [
    {
      id: "Row 1",
      complete: 46,
      expandedContent: "Expanded content"
    },
    {
      id: "Row 2",
      complete: 51,
      expandedContent: "Expanded content",
      expandedContentHeight: 100
    },
    {
      id: "Row 3",
      complete: 40,
    },
    {
      id: "Row 4",
      complete: 10,
    },
  ];
  
  return (
    <DxcInset space="2rem">
      <DxcDataGrid columns={columns} rows={rows} expandable uniqueRowId="id" />
    </DxcInset>
  );
}

Hierarchical data grid

() => {
  const columns = [
    {
      key: "name",
      label: "Label",
      summaryKey: "label"
    },
    {
      key: "value",
      label: "Value",
      alignment: "right",
      summaryKey: "total"
    },
  ];
  
  const rows = [
    {
        name: "Root Node 1",
        value: "1",
        id: "a",
        childRows: [
            {
                name: "Child Node 1.1",
                value: "1.1",
                id: "aa",
                childRows: [
                {
                    name: "Grandchild Node 1.1.1",
                    value: "1.1.1",
                    id: "aaa",
                },
                {
                    name: "Grandchild Node 1.1.2",
                    value: "1.1.2",
                    id: "aab",
                },
                ],
            },
            {
                name: "Child Node 1.2",
                value: "1.2",
                id: "ab",
            },  
        ],
    },
    {
        name: "Root Node 2",
        value: "2",
        id: "b",
        childRows: [
            {
                name: "Child Node 2.1",
                value: "2.1",
                id: "ba",
                childRows: [
                {
                    name: "Grandchild Node 2.1.1",
                    value: "2.1.1",
                    id: "baa",
                },
                ],
            },
            {
                name: "Child Node 2.2",
                value: "2.2",
                id: "bb",
            },
            {
                name: "Child Node 2.3",
                value: "2.3",
                id: "bc",
            },
        ],
    },
  ];

  const summaryRow = { label: "Total", total: 100, id: "summary" }

  return (
    <DxcInset space="2rem">
      <DxcDataGrid columns={columns} rows={rows} summaryRow={summaryRow} uniqueRowId="id" />
    </DxcInset>
  );
}

() => {
  const columns = [
    {
      key: "name",
      label: "Label",
      summaryKey: "label"
    },
    {
      key: "value",
      label: "Value",
      alignment: "right",
      summaryKey: "total"
    },
  ];
  
  const rows = [
    {
        name: "Root Node 1",
        value: "1",
        id: "a",
        childRows: [
            {
                name: "Child Node 1.1",
                value: "1.1",
                id: "aa",
                childRows: [
                {
                    name: "Grandchild Node 1.1.1",
                    value: "1.1.1",
                    id: "aaa",
                },
                {
                    name: "Grandchild Node 1.1.2",
                    value: "1.1.2",
                    id: "aab",
                },
                ],
            },
            {
                name: "Child Node 1.2",
                value: "1.2",
                id: "ab",
            },  
        ],
    },
    {
        name: "Root Node 2",
        value: "2",
        id: "b",
        childRows: [
            {
                name: "Child Node 2.1",
                value: "2.1",
                id: "ba",
                childRows: [
                {
                    name: "Grandchild Node 2.1.1",
                    value: "2.1.1",
                    id: "baa",
                },
                ],
            },
            {
                name: "Child Node 2.2",
                value: "2.2",
                id: "bb",
            },
            {
                name: "Child Node 2.3",
                value: "2.3",
                id: "bc",
            },
        ],
    },
  ];

  const summaryRow = { label: "Total", total: 100, id: "summary" }

  return (
    <DxcInset space="2rem">
      <DxcDataGrid columns={columns} rows={rows} summaryRow={summaryRow} uniqueRowId="id" />
    </DxcInset>
  );
}

Hierarchical and selectable data grid

() => {
  const columns = [
    {
      key: "name",
      label: "Label",
      summaryKey: "label"
    },
    {
      key: "value",
      label: "Value",
      alignment: "right",
      summaryKey: "total"
    },
  ];
  
  const rows = [
    {
        name: "Root Node 1",
        value: "1",
        id: "a",
        childRows: [
            {
                name: "Child Node 1.1",
                value: "1.1",
                id: "aa",
                childRows: [
                {
                    name: "Grandchild Node 1.1.1",
                    value: "1.1.1",
                    id: "aaa",
                },
                {
                    name: "Grandchild Node 1.1.2",
                    value: "1.1.2",
                    id: "aab",
                },
                ],
            },
            {
                name: "Child Node 1.2",
                value: "1.2",
                id: "ab",
            },  
        ],
    },
    {
        name: "Root Node 2",
        value: "2",
        id: "b",
        childRows: [
            {
                name: "Child Node 2.1",
                value: "2.1",
                id: "ba",
                childRows: [
                {
                    name: "Grandchild Node 2.1.1",
                    value: "2.1.1",
                    id: "baa",
                },
                ],
            },
            {
                name: "Child Node 2.2",
                value: "2.2",
                id: "bb",
            },
            {
                name: "Child Node 2.3",
                value: "2.3",
                id: "bc",
            },
        ],
    },
  ];

  const [selectedRows, setSelectedRows] = useState(new Set());
  return (
    <DxcInset space="2rem">
      <DxcDataGrid
          columns={columns}
          rows={rows}
          uniqueRowId="id"
          selectable
          selectedRows={selectedRows}
          onSelectRows={setSelectedRows}
        />
    </DxcInset>
  );
}

() => {
  const columns = [
    {
      key: "name",
      label: "Label",
      summaryKey: "label"
    },
    {
      key: "value",
      label: "Value",
      alignment: "right",
      summaryKey: "total"
    },
  ];
  
  const rows = [
    {
        name: "Root Node 1",
        value: "1",
        id: "a",
        childRows: [
            {
                name: "Child Node 1.1",
                value: "1.1",
                id: "aa",
                childRows: [
                {
                    name: "Grandchild Node 1.1.1",
                    value: "1.1.1",
                    id: "aaa",
                },
                {
                    name: "Grandchild Node 1.1.2",
                    value: "1.1.2",
                    id: "aab",
                },
                ],
            },
            {
                name: "Child Node 1.2",
                value: "1.2",
                id: "ab",
            },  
        ],
    },
    {
        name: "Root Node 2",
        value: "2",
        id: "b",
        childRows: [
            {
                name: "Child Node 2.1",
                value: "2.1",
                id: "ba",
                childRows: [
                {
                    name: "Grandchild Node 2.1.1",
                    value: "2.1.1",
                    id: "baa",
                },
                ],
            },
            {
                name: "Child Node 2.2",
                value: "2.2",
                id: "bb",
            },
            {
                name: "Child Node 2.3",
                value: "2.3",
                id: "bc",
            },
        ],
    },
  ];

  const [selectedRows, setSelectedRows] = useState(new Set());
  return (
    <DxcInset space="2rem">
      <DxcDataGrid
          columns={columns}
          rows={rows}
          uniqueRowId="id"
          selectable
          selectedRows={selectedRows}
          onSelectRows={setSelectedRows}
        />
    </DxcInset>
  );
}

Props
Examples

Edit this page on GitHub

Report an issue on GitHub

Contextual Menu

NextDate Input