Neologistic Paraphasic Mumbling
    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

    21

    Version

    2.2.2

    License

    MIT

    Unpacked Size

    34 kB

    Total Files

    22

    Last publish

    Collaborators

    • avatar