Package Exports
- @material-ui/data-grid
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@material-ui/data-grid) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Material-UI DataGrid
The Material-UI community edition of the data grid component.
Check out our Demo here!
Install
Using your favorite package manager, install @material-ui/data-grid:
// with npm
npm install @material-ui/data-grid
// with yarn
yarn add @material-ui/data-gridThis component has 3 peer dependencies that you will need to install as well.
"peerDependencies": {
"@material-ui/core": "^4.11.0",
"react": "^16.13.1",
"styled-components": "^5.1.0"
},Quick Guide
After installing the package, you are now ready to use the grid. First you have to import the component as below.
import { DataGrid } from '@material-ui/data-grid';Then you need to create some columns which are simple objects containing at least a field property.
You can import ColDef to see all column properties.
A simple set of column can be.
const columns = [{ field: 'id'}, {field: 'name', headerName: 'Client Name' <>}...];Rows are string key value pair objects.
const rows = [{ id: 1, name: 'Jon Snow' }, { id: 2, name: 'Tyrion Lannister' }...];A complete example below.
import * as React from 'react';
import { DataGrid, ColDef } from '@material-ui/data-grid';
const columns: ColDef[] = [
{ field: 'id' },
{ field: 'firstName' },
{ field: 'lastName' },
{
field: 'age',
cellClass: ['age'],
headerClass: ['age'],
type: 'number',
sortDirection: 'desc',
},
{
field: 'fullName',
description: 'this column has a value getter and is not sortable',
headerClass: 'highlight',
sortable: false,
valueGetter: (params) =>
`${params.getValue('firstName') || ''} ${
params.getValue('lastName') || ''
}`,
},
];
const rows = [
{ id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
{ id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
{ id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
{ id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
{ id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
{ id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
];
export default function MyApp() {
return (
<div style={{ width: 800, height: 600 }}>
<DataGrid
rows={rows}
columns={columns}
options={{ checkboxSelection: true }}
/>
</div>
);
}Code Sandbox here!