@naum_d/material-ui-table v1.1.12

@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

Columns

const columns = [
    { field: 'name', label: 'Name' },
    { field: 'surname', label: 'Surname' },
    { field: 'nickname', label: 'Hero Nickname' },
  ];

.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

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