material-ui-table
is a library which help to work with material-ui tables and improve developing experience by
adding fully customisable component with multiple props. Note this library required @material-ui/core
.
npm install --save @naum_d/material-ui-table
yarn add @naum_d/material-ui-table
To start work, you should just import MUITable
component from @naum_d/material-ui-table
import React from 'react';
import MUITable from '@naum_d/material-ui-table';
const Heroes = () => {
const table = [
{ name: 'Tony', surname: 'Stark', nickname: 'Iron Man' },
{ name: 'Peter', surname: 'Parker', nickname: 'Spider Man' },
{ name: 'Bruce', surname: 'Banner', nickname: 'Hulk' },
{ name: 'Hank', surname: 'Pym', nickname: 'Ant Man' },
];
const columns = [
{ field: 'name', label: 'Name' },
{ field: 'surname', label: 'Surname' },
{ field: 'nickname', label: 'Hero Nickname' },
];
return <MUITable {...{ table, columns }} />;
};
export default Heroes;
Prop | Type & Default | Description |
---|---|---|
table |
array of objects: [] |
List of values to render in table |
columns |
array of objects: [] |
List of columns to render in table |
options |
object: {} |
Object of options to customise table |
methods |
object: {} |
Object of functions to handle component effects |
actions |
object: {} |
Object of objects to add custom actions |
const columns = [
{ field: 'name', label: 'Name' },
{ field: 'surname', label: 'Surname' },
{ field: 'nickname', label: 'Hero Nickname' },
];
Prop | Type & Default | Description |
---|---|---|
field |
string: REQUIRED |
Key of object (row) in table array of objects (rows), to set a source of cell value. You can use . for nested objects like parent.child.foo |
label |
string: REQUIRED |
Label of column |
lookup |
function: i => i |
You can set function to change display of data. For example, you have date string, then in lookup you can set d => moment(d).format(DD-MM-YYYY) |
filterField |
string: undefined |
You can set field for filter if field differ from target for filtration |
canSort |
boolean: true |
Enable column for sorting |
canFilter |
boolean: true |
Enable column for filtration |
canSearch |
boolean: true |
Enable column for searching |
formCell |
boolena: true |
Enable column cells to become input in create or update mode |
This is a function which should return custom input component for filtration. Prop types is:
props = {
name: 'string', // name of filter
lable: 'string', // label of filter input
value: 'any', // value of filter
onChange: 'func',
}
onChange
function take two required arguments onChange('filter value', 'filter name')
This is a function which should return custom input component for create or update row form. Prop types is:
props = {
name: 'string', // name of filter
lable: 'string', // label of filter input
value: 'any', // value of filter
onChange: 'func',
}
onChange
function take two required arguments onChange('filter value', 'filter name')
Prop | Type & Default | Description |
---|---|---|
size |
number: 5 |
Rows count per page |
page |
number: 0 |
Setup start page |
search |
string: '' |
Setup search input value |
showSearch |
boolean: true |
Add search input in toolbar |
order |
string: 'asc' |
Setup direction of sort. Available 'asc' & 'desc' |
orderBy |
string: null |
Setup column name for sort |
canSelect |
boolean: false |
Add checkboxes for each row and header |
selected |
array: [] |
Setup selected rows in format: [{id: rowId}, ...] |
showAll |
boolean: false |
Add button which can show all rows in table |
minSize |
number: 5 |
Setup min size for showAll mode when table wrapped |
tableSizes |
array: [5, 10, 20] |
Setup sizes for table size selector |
showSize |
boolean: true |
Add selector of table sizes |
withPaging |
boolean: true |
Add pagination buttons for table |
isLoading |
boolean: false |
Activate a circle progress |
showFilter |
boolean: false |
Add filter row under table header |
filters |
object: {} |
Setup default filters |
showRowForm |
boolean: false |
Add form row under table header |
rowFormValues |
object: {} |
Setup default row form values |
treeTable |
boolean: flase |
Activate tree table mode. Display children values of rows |
childrenField |
string: 'children' |
Setup source of children for tree table mode |
parentField |
string: '' |
If field exist, make tree table from list of values |
serverPaging |
boolean: false |
When true , turn off all library methods like (search, filter), and render received table |
rowsCount |
number: 0 |
Setup table size |
Handle row click, when canSelect === true
, return row and isCheck, else return row
Handle page change, return new page
Handle page size change, return new size
Handle order change, return order (asc
or desc
) and column name
Handle search change, return new search string
Handle filters change, return new filters in object {filterName: 'filterVaalue', ...otherFilters}
Handle select all, in canSelect === true
, return array of selected
You can add custom actions in different places in format:
actions = {
actionName: {
action1: {
onClick: () => handleClick,
component: props => <MyButton {...props} />
}
action2: {
onClick: () => handleClick,
component: props => <MyButton {...props} />
}
}
}
onClick
return different values in depends from action.
Setup action for each row.
onClick
return current row values and method to activate row form for update: onClick: (row, open) => open(true)
.
cmponent
return props and row values: component: (props, row) => <MyComponent {...props} childre={row.id}/>
Setup action for update row form.
onClick
return object of input fields with values: onClick: formValues => console.log(formValues)
.
Setup action for table header in right top corner.
Setup action for table toolbar in right top corner.
onClick
return array equal to table and searched and filtered array:
onClick: (table, filtered) => console.log(table, filtered)
.
Setup action for table toolbar in right top corner when selected.length > 0
.
onClick
return array of selected rows: onClick: selectedRows => console.log(selectedRows)
.
Setup action for create row form.
onClick
return object of input fields with values: onClick: formValues => console.log(formValues)
.
MIT © naum-d