Navigator Prefabricating Marinates

    material-ui-datatables
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/material-ui-datatables package

    0.18.2 • Public • Published

    Material-UI-Datatables

    npm Build Status Coverage Status

    An another React Data tables component.
    Material-UI-Datatables is a custom React component using awesome Material-UI. It provides rendering data and emitting events such as filter and column sort and pagination which may help you dealing with your data. But it doesn't provide features all done within the component. Most parts of this component are stateless, which means you need to implement your logic for the events.

    Now material-ui provides example code of data tables component with it's v1.0.0 package

    Installation

    npm install material-ui-datatables

    or

    yarn add material-ui-datatables

    Demo

    Demo

    Status

    Work in progress

    Usage

    import React, {Component} from 'react';
    import DataTables from 'material-ui-datatables';
     
    const TABLE_COLUMNS = [
      {
        key: 'name',
        label: 'Dessert (100g serving)',
      }, {
        key: 'calories',
        label: 'Calories',
      },
      ...
    ];
     
    const TABLE_DATA = [
      {
        name: 'Frozen yogurt',
        calories: '159',
        fat: '6.0',
        carbs: '24',
        ...
      }, {
        name: 'Ice cream sandwich',
        calories: '159',
        fat: '6.0',
        carbs: '24',
        ...
      },
      ...
    ];
     
    class MyComponent extends Component {
      ...
      handleFilterValueChange = (value) => {
        // your filter logic
      }
     
      handleSortOrderChange = (key, order) => {
        // your sort logic
      }
     
      render() {
        return (
          <DataTables
            height={'auto'}
            selectable={false}
            showRowHover={true}
            columns={TABLE_COLUMNS}
            data={TABLE_DATA}
            showCheckboxes={false}
            onCellClick={this.handleCellClick}
            onCellDoubleClick={this.handleCellDoubleClick}
            onFilterValueChange={this.handleFilterValueChange}
            onSortOrderChange={this.handleSortOrderChange}
            page={1}
            count={100}
          />
        );
      }
    }

    Properties

    Name Type Default Description
    columns array Array of column settings object
    count number 0
    data array
    enableSelectAll bool false
    filterHintText string 'Search'
    filterValue string ''
    footerToolbarStyle object
    headerToolbarMode string 'default' 'default' or 'filter'
    height string 'inherit'
    initialSort object {column: 'column key', order: 'asc or desc'}
    multiSelectable bool false
    onCellClick function
    onCellDoubleClick function
    onFilterValueChange function Should set 'showHeaderToolbar' to true first
    onNextPageClick function
    onPreviousPageClick function
    onRowSelection function
    onRowSizeChange function
    onSortOrderChange function
    page number 1
    rowSize number 10
    rowSizeLabel string 'Rows per page:'
    rowSizeList array [10, 30, 50, 100]
    selectable bool false
    selectedRows array []
    showCheckboxes bool false
    showFooterToolbar bool true
    showHeaderToolbar bool false
    showHeaderToolbarFilterIcon bool true
    showRowHover bool false
    showRowSizeControls bool false
    summaryLabelTemplate function
    tableBodyStyle object
    tableHeaderColumnStyle object
    tableHeaderStyle object
    tableRowColumnStyle object
    tableRowStyle object
    tableStyle object
    tableWrapperStyle object
    title string Should set 'showHeaderToolbar' to true first
    titleStyle object Should set 'showHeaderToolbar' to true first
    toolbarIconRight node Can be an array of IconButton nodes

    Column settings

    Name Type Default Description
    key string
    label string
    sortable bool false
    tooltip string
    className string
    render function
    alignRight bool
    style object Inline column styles

    Setting example

    {
      key: 'name',
      label: 'Dessert (100g serving)',
      sortable: true,
      tooltip: 'Dessert (100g serving)',
      className: 'important-column',
      style: {
        width: 250,
      },
      render: (name, all) => <p>{name}</p>
    }

    License

    MIT

    Install

    npm i material-ui-datatables

    DownloadsWeekly Downloads

    1,081

    Version

    0.18.2

    License

    MIT

    Last publish

    Collaborators

    • hyojinksd