Data Grid

A React library data table and data grid

The library is based on MUI X

• Installation
• Usage
• Additional props

Installation

yarn add @tracktor/design-system @tracktor/data-grid 

or

npm install @tracktor/design-system @tracktor/data-grid 

Usage

import { DataGrid, DataGridProvider, GridColDef, GridRowsProp} from "@tracktor/data-grid";

const columns: GridColDef[] = [
  {
    field: "name",
    headerName: "Name",
  },
  {
    field: "companies",
    headerName: "Companies", 
  },
];

const rows : GridRowsProp = [
  {
    companies: "Tracktor",
    name: "Kevin Durant",
  },
];

const App = () => (
  <DataGridProvider licence={"YOUR_LICENSE_MUI"}>
    <DataGrid rows={rows} columns={columns} />
  </DataGridProvider>
);

Additional props

This library extend all props from MUI X and add some props to the DataGrid component.

| Prop | Type | Default | Description | |------------------------|----------------------------|------------|-------------------------------------------------------------------------| | height | number | string | undefined | Set the height of the grid | | panelHeight | number | "auto" | undefined | Set the height of custom panel when getDetailPanelContent is provided | | variant | "outlined" | undefined | Set variant | | elevation | number | 1 | Set elevation. This props work only with elevation variant. | | nbeRowsLoadingSkeleton | number | 7 | Set number of rows loading skeleton | | loadingVariant | "skeleton" | "linear" | "skeleton" | Set loading variant style | Set number of rows loading skeleton | | isLoading | boolean | undefined | Alias for loading | Set number of rows loading skeleton |