@naum_d/material-ui-table

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.

Install

npm install --save @naum_d/material-ui-table

yarn add @naum_d/material-ui-table

Usage

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;

API

Base props

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

Columns

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

.customFilter(props)

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')

.customInput(props)

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')

Options

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

Methods

onRowClick

Handle row click, when canSelect === true, return row and isCheck, else return row

onPageChange

Handle page change, return new page

onPageSizeChange

Handle page size change, return new size

onOrderChange

Handle order change, return order (asc or desc) and column name

onSearchChange

Handle search change, return new search string

onFiltersChange

Handle filters change, return new filters in object {filterName: 'filterVaalue', ...otherFilters}

onSelectAllChange

Handle select all, in canSelect === true, return array of selected

Actions

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.

line

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}/>

updateForm

Setup action for update row form.

onClick return object of input fields with values: onClick: formValues => console.log(formValues).

header

Setup action for table header in right top corner.

toolbar

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).

toolbarSelected

Setup action for table toolbar in right top corner when selected.length > 0.

onClick return array of selected rows: onClick: selectedRows => console.log(selectedRows).

createForm

Setup action for create row form.

onClick return object of input fields with values: onClick: formValues => console.log(formValues).

License

MIT © naum-d