npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

mui-datatables-next

v3.0.1

Published

Datatables for React using Material-UI

Downloads

22

Readme

MUI-Datatables - Datatables for Material-UI

Build Status Coverage Status dependencies Status npm version

MUI-Datatables is a data tables component built on Material-UI V1. It comes with features like filtering, view/hide columns, search, export to CSV download, printing, selectable rows, pagination, and sorting. On top of the ability to customize styling on most views, there are two responsive modes "stacked" and "scroll" for mobile/tablet devices.

Install

npm install mui-datatables --save

Demo

Edit react-to-print

Usage

For a simple table:


import MUIDataTable from "mui-datatables";

const columns = ["Name", "Company", "City", "State"];

const data = [
 ["Joe James", "Test Corp", "Yonkers", "NY"],
 ["John Walsh", "Test Corp", "Hartford", "CT"],
 ["Bob Herm", "Test Corp", "Tampa", "FL"],
 ["James Houston", "Test Corp", "Dallas", "TX"],
];

const options = {
  filterType: 'checkbox',
};

<MUIDataTable 
  title={"Employee List"} 
  data={data} 
  columns={columns} 
  options={options} 
/>

Or customize columns:


import MUIDataTable from "mui-datatables";

const columns = [
 {
  name: "Name",
  options: {
   filter: true,
   sort: true,
  }
 },      
 {
  name: "Company",
  options: {
   filter: true,
   sort: false,
  }
 },
 {
  name: "City",
  options: {
   filter: true,
   sort: false,
  }
 },  
 {
  name: "State",
  options: {
   filter: true,
   sort: false,
  }
 },
];

const data = [
 ["Joe James", "Test Corp", "Yonkers", "NY"],
 ["John Walsh", "Test Corp", "Hartford", "CT"],
 ["Bob Herm", "Test Corp", "Tampa", "FL"],
 ["James Houston", "Test Corp", "Dallas", "TX"],
];

const options = {
  filterType: 'checkbox',
};

<MUIDataTable 
  title={"Employee List"} 
  data={data} 
  columns={columns} 
  options={options} 
/>

API

<MUIDataTable />

The component accepts the following props:

|Name|Type|Description |:--:|:-----|:-----| |title|array|Title used to caption table |columns|array|Columns used to describe table. Must be either an array of simple strings or objects describing a column |data|array|Data used to describe table. Must be an array of strings or numbers |options|object|Options used to describe table

Options:

|Name|Type|Default|Description |:--:|:-----|:--|:-----| |page|number||User provided starting page for pagination |count|number||User provided override for total number of rows |filterList|array||User provided filter list |rowsSelected|array||User provided selected rows |filterType |string|'dropdown'|Choice of filtering view. Options are "checkbox", "dropdown", or "multiselect" |textLabels |object||User provided labels to localize text |pagination|boolean|true|Enable/disable pagination |selectableRows|boolean|true|Enable/disable row selection |customToolbar|function||Render a custom toolbar |customToolbarSelect|function||Render a custom selected rows toolbar |caseSensitive |boolean|false|Enable/disable case sensitivity for search |responsive|string|'stacked'|Enable/disable responsive table views. Options: 'stacked', 'scroll' |rowsPerPage|number|10|Number of rows allowed per page |rowsPerPageOptions|array|[10,15,20]|Options to provide in pagination for number of rows a user can select |rowHover|boolean|true|Enable/disable hover style over rows |sortFilterList|boolean|true|Enable/disable alphanumeric sorting of filter lists |sort|boolean|true|Enable/disable sort on all columns |filter|boolean|true|Show/hide filter icon from toolbar |search|boolean|true|Show/hide search icon from toolbar |print|boolean|true|Show/hide print icon from toolbar |download|boolean|true|Show/hide download icon from toolbar |viewColumns|boolean|true|Show/hide viewColumns icon from toolbar |onRowsSelect|function||Callback function that triggers when row(s) are selected. function(currentRowsSelected: array, rowsSelected: array) => void |onRowsDelete|function||Callback function that triggers when row(s) are deleted. function(rowsDeleted: array) => void |onCellClick|function||Callback function that triggers when a cell is clicked. function(colIndex: number, rowIndex: number) => void |onChangePage|function||Callback function that triggers when a page has changed. function(currentPage: number) => void |onChangeRowsPerPage|function||Callback function that triggers when the number of rows per page has changed. function(numberOfRows: number) => void |onSearchChange|function||Callback function that triggers when the search text value has changed. function(searchText: string) => void |onFilterChange|function||Callback function that triggers when filters have changed. function(changedColumn: string, filterList: array) => void |onColumnSortChange|function||Callback function that triggers when a column has been sorted. function(changedColumn: string, direction: string) => void |onColumnViewChange|function||Callback function that triggers when a column view has been changed. function(changedColumn: string, action: string) => void

Customize Columns

On each column object, you have the ability to customize columns to your liking with the 'options' property. Example:

const columns = [
 {
  name: "Name",
  options: {
   filter: true,
   sort: false
  }
 },
 ...
];  

Column:

|Name|Type|Description |:--:|:-----|:-----| |Name|string|Name of column (This field is required) |options|object|Options for customizing column

Column Options:

|Name|Type|Default|Description |:--:|:-----|:--|:-----| |display|boolean|true|Display column in table |filter|boolean|true|Display column in filter list |sort|boolean|true|Enable/disable sorting on column |customRender|function||Function that returns a string or React component. Used as display data within all table cells of a given column. function(value, tableMeta, updateValue) => string| React Component Example

customRender is called with these arguments:

customRender(value: any, tableMeta: {
  rowIndex: number,
  columnIndex: number,
  columnData: array, // Columns Options object
  rowData: array, // Full row data
  tableData: array, Full table data
  tableState: {
    announceText: null|string,
    page: number,
    rowsPerPage: number,
    filterList: array,
    selectedRows: {
      data: array,
      lookup: object,
    },
    showResponsive: boolean,
    searchText: null|string,
  },
}, updateValue: function)

Customize Styling

Using Material-UI theme overrides will allow you to customize styling to your liking. First, determine which component you would want to target and then lookup the override classname. Let's start with a simple example where we will change the background color of a body cell to be red:

import React from "react";
import MUIDataTable from "mui-datatables";
import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';

class BodyCellExample extends React.Component {

  getMuiTheme = () => createMuiTheme({
    overrides: {
      MUIDataTableBodyCell: {
        root: {
          backgroundColor: "#FF0000"
        }
      }
    }
  })

  render() {
  
    return (
      <MuiThemeProvider theme={this.getMuiTheme()}>
        <MUIDataTable title={"ACME Employee list"} data={data} columns={columns} options={options} />
      </MuiThemeProvider>
    );

  }
}

Localization

This package decided that the cost of bringing in another library to perform localizations would be too expensive. Instead the ability to override all text labels (which aren't many) is offered through the options property textLabels. The available strings:

const options = {
  ...
  textLabels: {
    body: {
      noMatch: "Sorry, no matching records found",
      toolTip: "Sort",
    },
    pagination: {
      next: "Next Page",
      previous: "Previous Page",
      rowsPerPage: "Rows per page:",
      displayRows: "of",
    },
    toolbar: {
      search: "Search",
      downloadCsv: "Download CSV",
      print: "Print",
      viewColumns: "View Columns",
      filterTable: "Filter Table",
    },
    filter: {
      all: "All",
      title: "FILTERS",
      reset: "RESET",
    },
    viewColumns: {
      title: "Show Columns",
      titleAria: "Show/Hide Table Columns",
    },
    selectedRows: {
      text: "rows(s) selected",
      delete: "Delete",
      deleteAria: "Delete Selected Rows",
    },
  }
  ... 
}

License

The files included in this repository are licensed under the MIT license.

Thanks

Thank you to BrowserStack for providing the infrastructure that allows us to test in real browsers.