About

This is just material-ui table with some features of material-ui datagrid.

Requirements

Requires the following packages:

• Axios
• react-query

Installation

npm i material-ui-datatable-api

API

These component only accepts the following props: | Name | Type | Description | | ------------- |:-----------------:|:-------------| | header | Array<HeadCell> | required. Header of the table. | | dataQuery | string | required. the url for getting data from database. | | token | string | optional. the token used for authorization. | | getSelection | function | optional. used to get the selected row from edit, delete, and view buttons in the table. Also gives the array of data from multiple selections. | | refetch | function | optional. used to refetch/reload data in the table. | | disableRowEdit | boolean | optional. removes the edit button in each row in the table. | | disableRowDelete | boolean | optional. removes the delete button in each row in the table. | | disableRowInfo | boolean | optional. removes the view button in each row in the table. | | disableSelection | boolean | optional. disable checkbox selection. | | disableFilter | boolean | optional. removes the filter button in the toolbar. | | disablePrint| boolean | optional. removes the print button in the toolbar |

Interfaces

This typescript interfaces can be imported from this package:

HeadCell

{
  disablePadding: boolean; //left padding of a column. used in the first column when checkbox selection in not disabled
  id: string; //should be the same with the column name from the table in your database
  label: string;// dispalyed name of column in data table
  numeric: boolean;// used to determine if alignment of column is right or left.
  from?: string;//used when using join in your queries. eg. data:{... from:{}..}
  boolean?: BooleanCell;//value be chipped if given. used in status column
}

BooleanCell

[
  (true: string), //displayed value when boolean is true
  (false: string), //displayed value when boolean is false
];

Order

'asc' | 'desc';

Example Use

const tableHeader = [
  {
    id: 'name',
    numeric: false,
    disablePadding: false,
    label: 'Full Name',
  },
  {
    id: 'age',
    numeric: true,
    disablePadding: false,
    label: 'Age',
  },
  {
    id: 'address',
    numeric: false,
    disablePadding: false,
    label: 'Address',
  },
  .
  .
  .
  .
];


//
return (
  <DataTable
    header={tableHeader}
    dataQuery={url + '/' + officesQuery}
    token={Cookies.get('token')}
    getSelection={(action, selections) => {
      handleFormOpen(action, selections);
    }}
    refetch={fetch => handleRefetch(fetch)}
    disablePrint={true}
  />
);