DataGrid

import { DataGrid } from '@cozmos-ui/data-grid';

Basic Use

<DataGrid columns={columns} data={data} />

<DataGrid columns={columns} data={data} />

Custom Cell

() => {
  const handleOnClick = React.useCallback(
    data => alert(JSON.stringify(data, null, 2)),
    [data]
  );

  // Memoize columns
  const customColumns = React.useMemo(() => [
    ...columns,
    {
      cell: rowData => (
        <Button
          variant="secondary"
          onClick={() => handleOnClick(rowData)}
          priority={3}
          size="sm"
        >
          view
        </Button>
      ),
      ignoreRowClick: true,
      allowOverflow: true,
      button: true
    }
  ]);

  return <DataGrid columns={customColumns} data={data} />;
};

() => {
  const handleOnClick = React.useCallback(
    data => alert(JSON.stringify(data, null, 2)),
    [data]
  );

  // Memoize columns
  const customColumns = React.useMemo(() => [
    ...columns,
    {
      cell: rowData => (
        <Button
          variant="secondary"
          onClick={() => handleOnClick(rowData)}
          priority={3}
          size="sm"
        >
          view
        </Button>
      ),
      ignoreRowClick: true,
      allowOverflow: true,
      button: true
    }
  ]);

  return <DataGrid columns={customColumns} data={data} />;
};

Expandable Rows

<DataGrid
  columns={columns}
  data={data}
  expandableRows
  expandableRowsComponent={<CustomExpander />}
/>

<DataGrid
  columns={columns}
  data={data}
  expandableRows
  expandableRowsComponent={<CustomExpander />}
/>

Selectable Rows

() => {
  const [selected, setSelected] = React.useState({});

  return (
    <DataGrid
      columns={columns}
      data={data}
      onSelectedRowsChange={setSelected}
      selectableRows
      title="Movies"
    />
  );
};

() => {
  const [selected, setSelected] = React.useState({});

  return (
    <DataGrid
      columns={columns}
      data={data}
      onSelectedRowsChange={setSelected}
      selectableRows
      title="Movies"
    />
  );
};

<DataGrid columns={columns} data={data} fixedHeader />

<DataGrid columns={columns} data={data} fixedHeader />

See react-data-table-component for the full list of PropTypes.

Props

Name	Type	Required	Default	Description
columns	arrayOf	No	[]	---
data	array	No	[]	Array of objects
expandableRows	bool	No	false	Enable rows to be expandable
expandableRowsComponent	union	No	---	React component i.e. <CustomExpander /> Receives row data as props: ({ data })
fixedHeader	bool	No	false	---
fixedHeaderScrollHeight	string	No	'300px'	---
highlightOnHover	bool	No	true	---
onSelectedRowsChange	func	No	---	Callback to access the row selected state. Returns: ({ allSelected, selectedCount, selectedRows })
pagination	bool	No	true	---
paginationComponentOptions	object	No	{ noRowsPerPage: true }	---
paginationPerPage	number	No	10	---
progressPending	bool	No	---	Displays loading text
selectableRows	bool	No	false	Enable rows to be selected with a checkbox.
title	string	No	''	The title displayed in the Table Header.

DataGrid

.css-en5un5{font:inherit;color:inherit;}.css-1ljf3ib{color:var(--theme-ui-colors-primary);font-weight:500;-webkit-text-decoration:none;text-decoration:none;cursor:pointer;font:inherit;color:inherit;}.css-1ljf3ib:hover{-webkit-text-decoration:underline;text-decoration:underline;}Basic Use

Custom Cell

Expandable Rows

Selectable Rows

Fixed Header

Props

Basic Use