Nostradamus Prophecy Machine
    Wondering what’s next for npm?Check out our public roadmap! »

    react-material-ui-datatable

    2.0.0-alpha.30 • Public • Published

    React MaterialUI Datatable

    Build Status npm version Conventional Commits

    Fully uncontrolled and client-side datatable based on material design. Designed with React philosophy. Just set your data and receive common manipulations on it: filtering, sorting, pagination and etc.

    📖 See Storybook of this component

    ⚠️ ATTENTION! WIP!

    This library is under the work. It means, that we can do Breaking Changes during one major alpha version. Please, check the CHANGELOG before update your current version.

    Install

    npm install react-material-ui-datatable@2.0.0-alpha.30 --save-exact
    

    or

    yarn add react-material-ui-datatable@2.0.0-alpha.30 --exact
    

    Demo

    Edit 9lz52zlylr

    Usage

    import { ReactMUIDatatable } from "react-material-ui-datatable";
     
    const columns = [
      {
        name: "firstName",
        label: "First Name"
      },
      {
        name: "lastName",
        label: "Last Name"
      },
      {
        name: "age",
        label: "Age"
      },
      {
        name: "car.make",
        label: "Car make"
      }
    ];
     
    const data = [
      { firstName: "Kylynn", lastName: "Lathey", age: 19, car: { make: "BWM" } },
      { firstName: "Cly", lastName: "Dukelow", age: 46,  car: { make: "Mitsubishi" } },
      { firstName: "Afton", lastName: "Chaffer", age: 34,  car: { make: "Audi" } },
      { firstName: "Deva", lastName: "Cowope", age: 22 car: { make: "Reno" } }
    ];
     
    <ReactMUIDatatable title={"Awesome list"} data={data} columns={columns} />;

    For more details see Storybook of this component

    ReactMUIDatatable's API

    Props

    Name Type Default Description
    title string "" Title of your table
    columns Object[] [] Options for each column. Detailed description see here
    customCell Function Function that returns a string or React component. Used as display for body cell. ({value: string, column: Object, row: Object}) => string \| React.Component
    data Object[] [] Your dataset, that you want to display in the table
    page number 0 Current page. Start with 0
    perPage number 5 Quantity of displaying items per page.
    perPageOption number[] [5, 10, 15] Per page option. Displayed on the paging panel
    selectedData Object[] [] Array of refs of selected data items. For example, [data[0], data[1]] will select first and second row.
    selectable boolean true Enable selections
    filterable boolean true Enable filters in toolbar panel
    searchable boolean true Enable search bar in toolbar panel
    toolbarSelectActions Function defaultToolbarSelectActions Function that returns a string or React component. Used as display actions in Toolbar selection. More details you can read here. You can see example in storybook at section Props -> toolbarSelectActions
    toolbarActions Function Function that returns a string or React component. Used to display custom actions in toolbar panel. Signature ({data: Object, computedData: Object, displayData: Object}) => string \| React.Component
    rowActions Function Function that returns a string or React component. Used to display custom actions in each row. Signature ({row: Object, rowIndex: number}) => string \| React.Component
    showSearchBar boolean false Open or close search bar in toolbar panel
    searchValue string "" The value by which the search is performed
    sort Array [{ columnName: '', direction: "ASC" }] Set sorting by column name and set direction for sorting. Can be set sort with multiple columns. Direction may be: ASC and DESC
    filterValues Object {} Set filters for columns
    onStateChanged Function Handler for state changing. Receives event-like object. Signature (event: {name: string, value: string, state: Object}) => any, where name - changed state, value - new value, state - current state of datatable component. Notice, that state contains only changeable values. It useful to restore state after reloading page, for example
    localization Object default localization More details you can read here
    customNoMatches Function Function that returns a string or React component. Used as display text if was no matches after applying filters. (localization: string) => string \| React.Component

    toolbarSelectActions

    (data: Object, selectedData: Object[], updateSelectedData: Function, handleDelete: Function) => string | React.Component
    Argument Type Description
    data Object Current dataset in the table (with applying filters and sort)
    selectedData Object[] Current selected data (their refs)
    updateSelectedData ( Object[] ) => any Function, that apply new selected data
    handleDelete ( Object[] ) => any Function, that delete selected data. For example, you can call it, when you got successful response from your api

    localization

    Default value
    {
      toolbar: {
        searchAction: 'Search',
        filterAction: 'Filters',
        closeSearch: 'Close search',
      },
      filterLists: {
        title: 'Filter',
        allOption: 'All',
        reset: 'Reset',
        noMatchesText: 'No matches',
      },
      toolbarSelect: {
        selectedData: count => `${count} row(s) selected`,
      },
      pagination: {
        rowsPerPage: 'Rows per page',
        displayedRows: ({ from, to, count }) => `${from}-${to} of ${count}`,
      },
      body: {
        noMatchesText: 'No matches',
      },
    }
    toolbar
    Name Type Default Description
    searchAction string 'Search' Label for search button
    filterAction string 'Filters' Label for filters button
    closeSearch string 'Close search' Label for close button of search bar
    filterLists
    Name Type Default Description
    title string 'Filter' Label for title of filter menu
    allOption string 'All' Label for option 'All' of select controls
    reset string 'Reset' Label for reset button of filters
    noMatchesText string 'No matches' Text if no matches in autocomplete
    toolbarSelect
    Name Type Default Description
    selectedData Function count => `${count} row(s) selected` Function that receives count of selected rows and returns string
    pagination
    Name Type Default Description
    rowsPerPage string 'Rows per page' Label for select rows per page
    displayedRows Function ({ from, to, count }) => `${from}-${to} of ${count}` Function that receives from, to and count of data elements and returns string

    Column option

    Name Type Default Description
    name string Name associated to your data"s object
    label string Display column title
    sortable boolean true Enable / disable sorting by column
    filterable boolean true Enable / disable filtering by column. false will exclude column from filter panel
    searchable boolean true Including / excluding column from search results

    ReactMUIDatatableProvider with ReactMUIDatatableRoot component

    If you have separate screens for editing, creating, detailing items or you have your own screens, and you want to save state of your datatable between pages, you can lift state of the table higher with ReactMUIDatatableProvider. It receives all props from description ReactMUIDatatable's API. To draw table just use ReactMUIDatableRoot component. It's already connect to Provider and will receive all props, that was passed into ReactMUIDatatableProvider. See example below.

    Example

    Soon here will be link to example. Sorry :(

    Alternative

    • mui-datatables - multifunctional table based on material ui components

    Thanks

    Install

    npm i react-material-ui-datatable

    DownloadsWeekly Downloads

    79

    Version

    2.0.0-alpha.30

    License

    MIT

    Unpacked Size

    49.6 kB

    Total Files

    5

    Last publish

    Collaborators

    • avatar