Have ideas to improve npm?Join in the discussion! »

@dccs/react-datagrid-mui
TypeScript icon, indicating that this package has built-in type declarations

2.2.2 • Public • Published

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:

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:

Version 2

import { DataGridPlain } from "@dccs/react-datagrid-plain";
import { datagridMuiTheme } from "@dccs/react-datagrid-mui";
 
<DataGridPlain
  {...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

Version 1

import { DataGridMui } from "@dccs/react-datagrid-mui";
 
<DataGridMui
  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

 or with sorting 

Edit react-datagrid-mui sortable

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.

Caveat or how to reload the DataGrid?

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.

import { DataGridMui } from "@dccs/react-datagrid-mui";
 
class Example extends React.Component {
  datagrid = null;
 
  render() {
    return (
      <React.Fragment>
        <DataGridMui
          colDef={[
            { prop: "id", header: "Id" },
            { prop: "display_name", header: "Full name", sortable: true }
          ]}
          onLoadData={createLoader(url)}
          ref={r => (this.datagrid = r)}
        />
 
        <button onClick={() => this.datagrid.load()}>Reload</button>
      </React.Fragment>
    );
  }
}

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.

Install

npm i @dccs/react-datagrid-mui

DownloadsWeekly Downloads

67

Version

2.2.2

License

MIT

Unpacked Size

34 kB

Total Files

22

Last publish

Collaborators

  • avatar