Mui-react-tables NPM

Flexible data tables built on Material UI framework

This project is an extension for Material UI Tables to provide features such as sorting and filtering.

Demo

Install

npm i mui-react-tables

Usage

import React from "react";
import MUITable from "mui-react-tables";

function App() {
  const columns = [
    { title: "Id", property: "id", sort: true },
    { title: "Name", property: "name", filter: true },
    { title: "Job Title", property: "jobTitle", filter: true }
  ];

  const rows = [
    { id: 1, name: "Alex", jobTitle: "Developer" },
    { id: 2, name: "Mike", jobTitle: "Team Leader" },
  ];
  return (
      <MUITable columns={columns} rows={rows} />
  );
}

Props

Name	Type	Description
columns	array	Must be represented by an array of objects each of which describes the properties of a column. See below for details
rows	array	Table rows
onFilterChange	function	Callback function, called after changing filters for a column. Pass arguments to the callback function: column, active filter values for column. For exapmle: (column, activeFilters) => { . ... }
onSortChange	function	Sorting callback function. Pass arguments to the callback function: column, direction. Direction: 'asc' or 'desc'

Column options

Name	Type	Description
title	string	Required. Title of a column
field	string	Path to the value in the current item. Mandatory property for provide sorting and filtering by column
sort	boolean	Default: false. Indicates whether the sorting is available by column
filter	boolean	Default: false. Indicates whether the filtering is available by column
formatter	function	To customize of the data format. Pass arguments to the function: current value and row data. For example: (value, row) => { ... }. Should return content
filterList	function/array	To customize filter values.
filterPredicate	function	Custom filter method. Should return boolean
filterType	function	Custom filter type. For example, if you want to filter a range of values you can define your own filter type (and predicate). See below for details

Custom filter type

The first point to use a custom filter type is to determine how to retrieve selected filter values from your filter type. You must register a callback function that returns an array with the selected filter values (called when the popover is closed). For example: this.props.registerSelectedFilters (() => {return 'array of selected filter values}}

Passed props to custom filter type:

Name	Type	Description
filter	object	Contains info about active filter values(filter.active), and filter values list (filter.list)
columns	object	Info about column. See above
registerSelectedFilters	function	For defining how to retrieve selected filter values after editing filter for column. See above

Example custom filter type

import React from 'react';
import PropTypes from 'prop-types';

export class RangeNumberFIlter extends React.Component {

  static propTypes = {
    filter: PropTypes.object,  
    column: PropTypes.object.isRequired, 
    registerSelectedFilters: PropTypes.func,
  };

  componentDidMount() {
    this.props.registerSelectedFilters(() => {
      return [this.state.min, this.state.max];
    });
    this.setState({
      min: this.props.filter.active[0],
      max: this.props.filter.active[1],
    });
  }

  state = {
    min: null,
    max: null,
  };

  render() {
    return (
        <React.Fragment>
             ...
        </React.Fragment>
    );
  }
}