Data Grid

![npm version](https://badge.fury.io/js/@tracktor%2Fdata-grid)

A React library data table and data grid

> The library is based on MUI X

- Installation
- Usage
- Additional props

Installation

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

or

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

`Usage`

`typescript jsx 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 = () => ( );`

`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 whengetDetailPanelContentis provided | | variant | "outlined" | undefined | Set variant | | elevation | number | 1 | Set elevation. This props work only withelevation` 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 |

Usage

typescript jsx
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 = () => (
  
    
  
);

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