material-ui-datatable-api v1.3.14

About

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

API

These component only accepts the following props: | Name | Type | Description | | ------------- |:-----------------:|:-------------| | header | Array | required. Header of the table. | | rows | any[] | required. Its an array of object to displayed as rows in table | | rowsPerPage | number | required. The limit of rows to be displayed in a page | | page | number | required. Tells the table the current page(collection of rows per the specified limit) | | rowsCount | number | required. The total number of rows of data without the page and limit | | setPage | function | required. A function that gives the value of the next page when using pagination. | | setRowsPerPage | function | required. A function that gives the value of the limit of rows when changing the limit | | onRowEdit | function | optional. When used, it shows the edit button in each row. Also gives all data of the row | | onRowDelete | function | optional. When used, it shows the delete button in each row. Also gives all the data of the row | | onRowInfo | function | optional. When used, it shows the info button in each row. Also gives all the data of the row | | onColumnSort | function | optional. Gives the column, and the order(ascending or descending) | | searchString | function | optional. Gives the current value in the search input field | | isDataLoading | boolean | optional. Shows a LoadingBar and text when waiting for the data to be loaded. | | onFilter | function | optional. When used, it shows the filter button in the toolbar. Also gives the array of all added filters | | onMultipleDelete| function | optional. When used, it enables checkbox selection. Also gives an array of id of selected rows |

Interfaces

HeadCell

{
  disablePadding: boolean;
  id: string;
  label: string;
  numeric: boolean;
}

FilterOperators

  | 'contains'
  | 'matches with'
  | 'starts with'
  | 'ends with'
  | 'is empty'
  | 'not empty';

FilterType

{
  column: string;
  operator: FilterOperators;
  value: string;
}

PopoverProps

{
  anchorEl: any;
  onClose(): void;
  id: string;
}

ActiveColumns

{
  id: string;
  active: boolean;
  label: string;
}

FilterFields

'column' | 'operator' | 'value';

FilterProps

{
  anchorEl: any;
  onClose(): void;
  id: string;
  header: HeadCell[];
  filters: FilterType[];
  onFilterChange(value: string, field: FilterFields, column: string): void;
  onAddFilter(): void;
  onDeleteFilter(column: string): void;
}

Order

'asc' | 'desc';

Example Use

const tableHeader = [
  {
    id: 'name', //must be the same to the column name in your table in database
    numeric: false,
    disablePadding: false,
    label: 'Full Name',
  },
  {
    id: 'age',
    numeric: true,
    disablePadding: false,
    label: 'Age',
  },
  {
    id: 'address',
    numeric: false,
    disablePadding: false,
    label: 'Address',
  },
];

const data = [ //from your query in your database
  {
    name: 'Juan de la Cruz',
    age: 12,
    address: 'Block 3, Lot 5, Barangay, City, Province, Country',
  },
  {
    name: 'Juan de la Cruz',
    age: 12,
    address: 'Block 3, Lot 5, Barangay, City, Province, Country',
  },
  {
    name: 'Juan de la Cruz',
    age: 12,
    address: 'Block 3, Lot 5, Barangay, City, Province, Country',
  },
];

const [page, setPage] = useState<number>(0);
const [limit, setLimit] = useState<number>(5);
const [searchString, setSearchString] = useState<string>("");
const [filters, setFilters] = useState<FilterType[]>();
const [orderSettings, setOrderSettings] = useState<OrderType>({
  order: "asc",
  column: "",
});
.
.
.
.

//
return (
  <DataTable
    header={tableHeader}
    rows={data}
    page={page}
    setPage={newPage => setPage(newPage)}
    rowsPerPage={limit}
    setRowsPerPage={newLimit => setLimit(newLimit)}
    rowsCount={rowsCount}
    onRowEdit={row => handleRowEdit(row)}
    onRowDelete={id => handleRowDelete(id)}
    onRowInfo={() => {}}
    onColumnSort={(order, column) => handleColumnSort(order, column)}
    // onMultipleDelete={(selected) => handleMultipleDelete(selected)}
    searchString={str => setSearchString(str)}
    isDataLoading={querydata.isLoading}
    onFilter={filters => {
      setFilters([...filters]);
    }}
  />
);