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>
    );
  }
}

Contributing

Contributions are always welcome