react-datagrid-mui · !travis build !npm version

A light datagrid build upon react-table-mui for React, themed with Material-UI.

Installation

You should install react-datagrid-mui with npm or yarn:

npm install @dccs/react-datagrid-mui
or
yarn add @dccs/react-datagrid-mui

This command will download and install react-datagrid-mui

How it works

react-datagrid-mui uses:

- @dccs/react-table-mui to display the table data
- TablePagination from Material-UI for the paging controls.

react-datagrid-mui is designed to do all the paging and sorting for you. You only provide the onLoadData callback, that returns the data as a Promise<{data: any[], total: number}> (paging needs total to provide the maximal number pages).

Here is an example:

$3

With Version 4 we merged react-datagrid-plain into react-datagrid-plain. Now there is only a MUI datagrid; no need to theme anymore.

``javascript
import { DataGridMui } from "@dccs/react-datagrid-mui";

colDef={[
{ prop: "id", header: "Id" },
{ prop: "display_name", header: "Full name", sortable: true }
]}
onLoadData={(page, rowsPerPage, orderBy, desc) =>
fetch(url / with querystring params /)
.then(resp => resp.json())
.then(resp => ({ data: resp.data, total: resp.total }))
}
/>;
`

$3

`javascript
import { DataGridPlain } from "@dccs/react-datagrid-plain";
import { datagridMuiTheme } from "@dccs/react-datagrid-mui";

{...datagridMuiTheme}
colDef={[
{ prop: "id", header: "Id" },
{ prop: "display_name", header: "Full name", sortable: true }
]}
onLoadData={(page, rowsPerPage, orderBy, desc) =>
fetch(url / with querystring params /)
.then(resp => resp.json())
.then(resp => ({ data: resp.data, total: resp.total }))
}
/>;
`

TODO: Codesandbox

$3

`javascript
import { DataGridMui } from "@dccs/react-datagrid-mui";

colDef={[
{ prop: "id", header: "Id" },
{ prop: "display_name", header: "Full name", sortable: true }
]}
onLoadData={(page, rowsPerPage, orderBy, desc) =>
fetch(url / with querystring params /)
.then(resp => resp.json())
.then(resp => ({ data: resp.data, total: resp.total }))
}
/>;
`

![Edit react-datagrid-mui simple](https://codesandbox.io/s/qlwk15q7vq)

 or with sorting 

![Edit react-datagrid-mui sortable](https://codesandbox.io/s/o9no9k4mzq)

Inside the onLoadData you can use whatever Http library you want. That way it is possible to append i.e. authorization tokens, custom http headers, ...

onLoadData can provide data from every source. Server, client, rest, GraphQL, ... react-datagrid-mui does not care.

$3

react-datagrid-mui keeps the state of the table (current page, number of displayes rows, ...) internal, so you don't have to worry about the state.

But that also means that react-datagrid-mui triggers any (re-)load of the data itself. If you want to reload the datagrid from outside you must grap the datagrid instance with a ref and call load() on it.

`javascript
import { DataGridMui } from "@dccs/react-datagrid-mui";

class Example extends React.Component {
datagrid = null;

render() {
return (

colDef={[
{ prop: "id", header: "Id" },
{ prop: "display_name", header: "Full name", sortable: true }
]}
onLoadData={createLoader(url)}
ref={r => (this.datagrid = r)}
/>

this.datagrid.load()}>Reload

);
}
}
``

Changes in Version 2

Version 2 introduced the react-datagrid-plain component. It host all the necessary functionality for paging, etc.
This package is just to theme the react-datagrid-plain component. So the usage changed.