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-x/Grid
The official Material-UI Data Grid written in typescript.
Check out our Demo here!
Install
Using your favourite package manager, install @material-ui-x/grid
//with npm
npm install @material-ui-x/grid
//with yarn
yarn add @material-ui-x/gridThis component has 2 peer dependencies that you will need to install as well.
"peerDependencies": {
"react": "^16.13.1",
"styled-components": "^5.0.1"
},Quick Guide
After installing the package, you are now ready to use the grid. First you have to import the component as below.
import { Grid } from '@material-ui-x/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 { ColDef, Grid } from '@material-ui-x/grid';
function MyApp() {
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 }
];
return (
<div style={{ width: 800, height: 600 }}>
<Grid rows={rows} columns={columns} options={{ checkboxSelection: true }} />
</div>
);
}
Code Sandbox here!