❤
npm
Sign UpSign In

mui-react-tables

1.1.2 • Public • Published

Flexible data tables built on Material UI framework

npm version Build Status License: MIT

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

Demo

Edit 6x4067oq7r

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

Readme

Keywords

Package Sidebar

Install

npm i mui-react-tables

Repository

github.com/alxbbnk/mui-react-tables

Homepage

github.com/alxbbnk/mui-react-tables#readme

Weekly Downloads

5

Version

1.1.2

License

MIT

Unpacked Size

27.5 kB

Total Files

10

Last publish

Collaborators

  • asrbbnk
Try on RunKit
Report malware