Data Grids

UI Foundations Kit builds on top of the MUI Data Grid and reskins it with a simplified theme. To swap between the variants of the table you can refer to the Table component in the source code.

Usage

You can import from /src/components/Table and apply a different variant to change styles from simple or standard (the MUI default):

import { Table } from 'src/components/Table';

export default function MyComponent() {
  return (
    <Table variant="standard" />
  );
}

In addition, UI Foundations Kit includes additional classes that can be applied to rows in your tables to disable, or mark them as errored or alerted. These classes are applied with the getCellClassName and getRowClassName functions.

import { Table } from 'src/components/Table';

export default function MyComponent() {
  return (
    <Table
      getCellClassName={(params) => {
        if (params.row.error) {
          return 'datagrid-row-error';
        }
        return '';
      }}
      getRowClassName={(params) => {
        if (params.row.disabled) {
          return 'datagrid-row-disabled';
        }
        return '';
      }}
    />
  );
}

This will apply a background pattern to specific rows, to mark data as disabled or errored. You can customize these classes in your theme file to match your app’s design language if it differs from our defaults.

Get Started

Theme Tokens

Tools & Modules

Kit Components by Category

Usage

​Usage

Usage