Git Product home page Git Product logo

mui-datatables's Introduction

MUI-Datatables - Datatables for MUI (formerly Material-UI)

Build Status NPM Downloads Coverage Status npm version

MUI-Datatables is a responsive datatables component built on Material-UI. It comes with features like filtering, resizable columns, view/hide columns, draggable columns, search, export to CSV download, printing, selectable rows, expandable rows, pagination, and sorting. On top of the ability to customize styling on most views, there are three responsive modes "vertical", "standard", and "simple" for mobile/tablet devices.

Version 3 has been released! You can read about the updates here!

Table of contents

Install

npm install mui-datatables --save

If your project doesn't already use them, you need to install mui v5 and it's icon pack:
npm --save install @mui/material @emotion/react @emotion/styled @mui/icons-material

Compatibility

mui-datatables material-ui Required Dependencies
^2.0.0 ^3.0.0 @material-ui/core,@material-ui/icons
^3.0.0 ^4.10.0 @material-ui/core,@material-ui/icons
^3.8.0 ^4.12.0 @material-ui/core,@material-ui/icons
^4.0.0 ^5.9.3 @mui/material,@mui/icons-material

Demo

Edit react-to-print

Browse live demos of all examples in this repo in here!

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 React from "react"
import MUIDataTable from "mui-datatables";

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

const data = [
 { name: "Joe James", company: "Test Corp", city: "Yonkers", state: "NY" },
 { name: "John Walsh", company: "Test Corp", city: "Hartford", state: "CT" },
 { name: "Bob Herm", company: "Test Corp", city: "Tampa", state: "FL" },
 { name: "James Houston", company: "Test Corp", city: "Dallas", state: "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 either an array containing objects of key/value pairs with values that are strings or numbers, or arrays of strings or numbers (Ex: data: [{"Name": "Joe", "Job Title": "Plumber", "Age": 30}, {"Name": "Jane", "Job Title": "Electrician", "Age": 45}] or data: [["Joe", "Plumber", 30], ["Jane", "Electrician", 45]]). The customBodyRender and customBodyRenderLite options can be used to control the data display.
options object Options used to describe table
components object Custom components used to render the table

Options:

Name Type Default Description
caseSensitive boolean false Enable/disable case sensitivity for search.
confirmFilters boolean false Works in conjunction with the customFilterDialogFooter option and makes it so filters have to be confirmed before being applied to the table. When this option is true, the customFilterDialogFooter callback will receive an applyFilters function which, when called, will apply the filters to the table. Example
columnOrder array An array of numbers (column indices) indicating the order the columns should be displayed in. Defaults to the order provided by the Columns prop. This option is useful if you'd like certain columns to swap positions (see draggableColumns option).
count number User provided override for total number of rows.
customFilterDialogFooter function Add a custom footer to the filter dialog. customFilterDialogFooter(curentFilterList: array, applyFilters: function) => React Component
customFooter function Render a custom table footer. function(count, page, rowsPerPage, changeRowsPerPage, changePage, textLabels: object) => string| React Component Example
customRowRender function Override default row rendering with custom function. customRowRender(data, dataIndex, rowIndex) => React Component
customSearch function Override default search with custom function. customSearch(searchQuery: string, currentRow: array, columns: array) => boolean
customSearchRender function Render a custom table search. customSearchRender(searchText: string, handleSearch, hideSearch, options) => React Component
customSort function Override default sorting with custom function. If you just need to override the sorting for a particular column, see the sortCompare method in the column options. function(data: array, colIndex: number, order: string) => array Example
customTableBodyFooterRender function Render a footer under the table body but above the table's standard footer. This is useful for creating footers for individual columns. Example
customToolbar function Render a custom toolbar function({displayData}) => React Component
customToolbarSelect function Render a custom selected rows toolbar. function(selectedRows, displayData, setSelectedRows) => void
download boolean or string true Show/hide download icon from toolbar. Possible values:

  • true: Button is visible and clickable.
  • false: Button is not visible.
  • disabled: Button is visible, but not clickable.
downloadOptions object see -> An object of options to change the output of the CSV file:

  • filename: string
  • separator: string
  • filterOptions: object
    • useDisplayedColumnsOnly: boolean
    • useDisplayedRowsOnly: boolean

Default Value:{filename: 'tableDownload.csv', separator: ','}
draggableColumns object {} An object of options describing how dragging columns should work. The options are:

  • enabled:boolean: Indicates if draggable columns are enabled. Defaults to false.
  • transitionTime:number: The time in milliseconds it takes for columns to swap positions. Defaults to 300.

To disable the dragging of a particular column, see the "draggable" option in the columns options. Dragging a column to a new position updates the columnOrder array and triggers the onColumnOrderChange callback.
elevation number 4 Shadow depth applied to Paper component.
enableNestedDataAccess string "" If provided a non-empty string (ex: "."), it will use that value in the column's names to access nested data. For example, given a enableNestedDataAccess value of "." and a column name of "phone.cell", the column would use the value found in phone:{cell:"555-5555"}. Any amount of nesting will work. Example demonstrates the functionality.
expandableRows boolean false Enable/disable expandable rows. Example
expandableRowsHeader boolean true Show/hide the expand all/collapse all row header for expandable rows.
expandableRowsOnClick boolean false Enable/disable expand trigger when row is clicked. When False, only expand icon will trigger this action.
filter boolean or string true Show/hide filter icon from toolbar. Possible values:

  • true: Button is visiable and clickable.
  • false: Button is not visible.
  • disabled: Button is visible, but not clickable.
filterArrayFullMatch boolean true For array values, default checks if all the filter values are included in the array. If false, checks if at least one of the filter values is in the array.
filterType string Choice of filtering view. enum('checkbox', 'dropdown', 'multiselect', 'textField', 'custom')
fixedHeader boolean true Enable/disable a fixed header for the table Example
fixedSelectColumn boolean true Enable/disable fixed select column. Example
isRowExpandable function Enable/disable expansion or collapse on certain expandable rows with custom function. Will be considered true if not provided. function(dataIndex: number, expandedRows: object(lookup: {dataIndex: number}, data: arrayOfObjects: {index: number, dataIndex: number})) => boolean.
isRowSelectable function Enable/disable selection on certain rows with custom function. Returns true if not provided. function(dataIndex: number, selectedRows: object(lookup: {dataindex: boolean}, data: arrayOfObjects: {index, dataIndex})) => boolean.
jumpToPage boolean false When true, this option adds a dropdown to the table's footer that allows a user to navigate to a specific page. Example
onCellClick function Callback function that triggers when a cell is clicked. function(colData: any, cellMeta: { colIndex: number, rowIndex: number, dataIndex: 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
onColumnOrderChange function Callback function that triggers when a column has been dragged to a new location. function(newColumnOrder:array, columnIndex:number, newPosition:number) => void
onColumnSortChange function Callback function that triggers when a column has been sorted. function(changedColumn: string, direction: string) => void
onDownload function A callback function that triggers when the user downloads the CSV file. In the callback, you can control what is written to the CSV file. This method can be used to add the Excel specific BOM character (see this example). function(buildHead: (columns) => string, buildBody: (data) => string, columns, data) => string. Return false to cancel download of file.
onFilterChange function Callback function that triggers when filters have changed. function(changedColumn: string, filterList: array, type: enum('checkbox', 'dropdown', 'multiselect', 'textField', 'custom', 'chip', 'reset'), changedColumnIndex, displayData) => void
onFilterChipClose function Callback function that is triggered when a user clicks the "X" on a filter chip. function(index : number, removedFilter : string, filterList : array) => void Example
onFilterConfirm function Callback function that is triggered when a user presses the "confirm" button on the filter popover. This occurs only if you've set confirmFilters option to true. function(filterList: array) => void Example
onFilterDialogClose function Callback function that triggers when the filter dialog closes. function() => void
onFilterDialogOpen function Callback function that triggers when the filter dialog opens. function() => void
onRowClick function Callback function that triggers when a row is clicked. function(rowData: string[], rowMeta: { dataIndex: number, rowIndex: number }) => void
onRowExpansionChange function Callback function that triggers when row(s) are expanded/collapsed. function(currentRowsExpanded: array, allRowsExpanded: array, rowsExpanded: array) => void
onRowsDelete function Callback function that triggers when row(s) are deleted. function(rowsDeleted: object(lookup: {[dataIndex]: boolean}, data: arrayOfObjects: {index: number, dataIndex: number}), newTableData) => void OR false (Returning false prevents row deletion.)
onRowSelectionChange function Callback function that triggers when row(s) are selected/deselected. function(currentRowsSelected: array, allRowsSelected: array, rowsSelected: array) => void
onSearchChange function Callback function that triggers when the search text value has changed. function(searchText: string) => void
onSearchClose function Callback function that triggers when the searchbox closes. function() => void
onSearchOpen function Callback function that triggers when the searchbox opens. function() => void
onTableChange function Callback function that triggers when table state has changed. function(action: string, tableState: object) => void
onTableInit function Callback function that triggers when table state has been initialized. function(action: string, tableState: object) => void
onViewColumnsChange function Callback function that triggers when a column view has been changed. Previously known as onColumnViewChange. function(changedColumn: string, action: string) => void
page number User provided page for pagination.
pagination boolean true Enable/disable pagination.
print boolean or string true Show/hide print icon from toolbar. Possible values:

  • true: Button is visiable and clickable.
  • false: Button is not visible.
  • disabled: Button is visible, but not clickable.
renderExpandableRow function Render expandable row. function(rowData, rowMeta) => React Component Example
resizableColumns boolean false Enable/disable resizable columns.
responsive string 'stacked' Enable/disable responsive table views. Options:

  • "vertical" (default value): In smaller views the table cells will collapse such that the heading is to the left of the cell value.
  • "standard": Table will stay in the standard mode but make small changes to better fit the allocated space.
  • "simple": On very small devices the table rows will collapse into simple display.

Example
rowHover boolean true Enable/disable hover style over rows.
rowsExpanded array User provided expanded rows.
rowsPerPage number 10 Number of rows allowed per page.
rowsPerPageOptions array [10,15,100] Options to provide in pagination for number of rows a user can select.
rowsSelected array User provided array of numbers (dataIndexes) which indicates the selected rows.
search boolean or string true Show/hide search icon from toolbar. Possible values:

  • true: Button is visiable and clickable.
  • false: Button is not visible.
  • disabled: Button is visible, but not clickable.
searchPlaceholder string Search text placeholder. Example
searchProps object {} Props applied to the search text box. You can set method callbacks like onBlur, onKeyUp, etc, this way. Example
searchOpen boolean false Initially displays search bar.
searchAlwaysOpen boolean false Always displays search bar, and hides search icon in toolbar.
searchText string Search text for the table.
selectableRows string 'multiple' Indicates if rows can be selected. Options are "multiple", "single", "none".
selectableRowsHeader boolean true Show/hide the select all/deselect all checkbox header for selectable rows.
selectableRowsHideCheckboxes boolean false Hides the checkboxes that appear when selectableRows is set to "multiple" or "single". Can provide a more custom UX, especially when paired with selectableRowsOnClick.
selectableRowsOnClick boolean false Enable/disable select toggle when row is clicked. When False, only checkbox will trigger this action.
selectToolbarPlacement string 'replace' Controls the visibility of the Select Toolbar, options are 'replace' (select toolbar replaces default toolbar when a row is selected), 'above' (select toolbar will appear above default toolbar when a row is selected) and 'none' (select toolbar will never appear)
serverSide boolean false Enable remote data source.
setFilterChipProps function Is called for each filter chip and allows you to place custom props on a filter chip. function(colIndex: number, colName: string, filterValue: string) => object Example
setRowProps function Is called for each row and allows you to return custom props for this row based on its data. function(row: array, dataIndex: number, rowIndex: number) => object Example
setTableProps function Is called for the table and allows you to return custom props for the table based on its data. function() => object Example
sort boolean true Enable/disable sort on all columns.
sortFilterList boolean true Enable/disable alphanumeric sorting of filter lists.
sortOrder object {} Sets the column to sort by and its sort direction. To remove/reset sorting, input in an empty object. The object options are the column name and the direction: name: string, direction: enum('asc', 'desc') Example
tableId string auto generated A string that is used internally for identifying the table. It's auto-generated, however, if you need it set to a custom value (ex: server-side rendering), you can set it via this property.
tableBodyHeight string 'auto' CSS string for the height of the table (ex: '500px', '100%', 'auto').
tableBodyMaxHeight string CSS string for the height of the table (ex: '500px', '100%', 'auto').
textLabels object User provided labels to localize text.
viewColumns boolean or string true Show/hide viewColumns icon from toolbar. Possible values:

  • true: Button is visiable and clickable.
  • false: Button is not visible.
  • disabled: Button is visible, but not clickable.
storageKey string save current state to local storage(Only browser).

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)
label string Column Header Name override
options object Options for customizing column

Column Options:

Name Type Default Description
customBodyRender function Function that returns a string or React component. Used to display data within all table cells of a given column. The value returned from this function will be used for filtering in the filter dialog. If this isn't need, you may want to consider customBodyRenderLite instead. function(value, tableMeta, updateValue) => string| React Component Example
customBodyRenderLite function Function that returns a string or React component. Used to display data within all table cells of a given column. This method performs better than customBodyRender but has the following caveats:

  • The value returned from this function is not used for filtering, so the filter dialog will use the raw data from the data array.
  • This method only gives you the dataIndex and rowIndex, leaving you to lookup the column value.

function(dataIndex, rowIndex) => string| React Component Example
customHeadLabelRender function Function that returns a string or React component. Used for creating a custom header to a column. This method only affects the display in the table's header, other areas of the table (such as the View Columns popover), will use the column's label. function(columnMeta : object) => string| React Component
customFilterListOptions object (These options only affect the filter chips that display after filters are selected. To modify the filters themselves, see filterOptions)

  • render: function that returns a string or array of strings used as the chip label(s). function(value) => string OR arrayOfStrings Example
  • update: function that returns a filterList (see above) allowing for custom filter updates when removing the filter chip. filterType must be set to "custom". function(filterList, filterPos, index) => filterList Example
customHeadRender function Function that returns a string or React component. Used as display for column header. function(columnMeta, handleToggleColumn, sortOrder) => string| React Component
display boolean or string true Display column in table. Possible values:

  • true: Column is visible and toggleable via the View Columns popover in the Toolbar.
  • false: Column is not visible but can be made visible via the View Columns popover in the Toolbar.
  • excluded: Column is not visible and not toggleable via the View Columns popover in the Toolbar.

See also: viewColumns and filter options.
download boolean true Display column in CSV download file.
draggable boolean true Determines if a column can be dragged. The draggableColumns.enabled option must also be true.
empty boolean false This denotes whether the column has data or not (for use with intentionally empty columns).
filter boolean true Display column in filter list.
filterList array Filter value list Example
filterOptions object

These options affect the filter display and functionality from the filter dialog. To modify the filter chips that display after selecting filters, see customFilterListOptions

This option is an object of several options for customizing the filter display and how filtering works.

  • names: custom names for the filter fields Example
  • logic: custom filter logic Example
  • display(filterList, onChange(filterList, index, column), index, column, filterData): Custom rendering inside the filter dialog Example. filterList must be of the same type in the main column options, that is an array of arrays, where each array corresponds to the filter list for a given column.
  • renderValue: A function to customize filter choices Example. Example use case: changing empty strings to "(empty)" in a dropdown.
  • fullWidth (boolean): Will force a filter option to take up the grid's full width.
filterType string 'dropdown' Choice of filtering view. Takes priority over global filterType option.enum('checkbox', 'dropdown', 'multiselect', 'textField', 'custom') Use 'custom' if you are supplying your own rendering via filterOptions.
hint string Display hint icon with string as tooltip on hover.
print boolean true Display column when printing.
searchable boolean true Exclude/include column from search results.
setCellHeaderProps function Is called for each header cell and allows you to return custom props for the header cell based on its data. function(columnMeta: object) => object Example
setCellProps function Is called for each cell and allows to you return custom props for this cell based on its data. function(cellValue: string, rowIndex: number, columnIndex: number) => object Example
sort boolean true Enable/disable sorting on column.
sortCompare function Custom sort function for the column. Takes in an order string and returns a function that compares the two column values. If this method and options.customSort are both defined, this method will take precedence. (order) => ({data: val1}, {data: val2}) => number Example
sortDescFirst boolean false Causes the first click on a column to sort by desc rather than asc. Example
sortThirdClickReset boolean false Allows for a third click on a column header to undo any sorting on the column. Example
viewColumns boolean true Allow user to toggle column visibility through 'View Column' list.

customHeadRender is called with these arguments:

function(columnMeta: {
  customHeadRender: func,
  display: enum('true', 'false', 'excluded'),
  filter: boolean,
  sort: boolean,
  download: boolean,
  empty: boolean,
  index: number,
  label: string,
  name: string,
  print: boolean,
  searchable: boolean,
  viewColumns: boolean
}, handleToggleColumn: function(columnIndex))

customBodyRender is called with these arguments:

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

Plug-ins

The table lends itself to plug-ins in many areas, especially in the customRender functions. Many use cases for these render functions are common, so a set of plug-ins are available that you can use.

Available Plug-ins:

Name Type Default Description
debounceSearchRender function Function that returns a function for the customSearchRender method. This plug-in allows you to create a debounced search which can be useful for server-side tables and tables with large data sets. function(debounceWait) => function Example

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 { createTheme, ThemeProvider } from '@mui/material/styles';

class BodyCellExample extends React.Component {

  getMuiTheme = () => createTheme({
    components: {
      MUIDataTableBodyCell: {
        styleOverrides:{
          root: {
              backgroundColor: "#FF0000"
          }
        }
      }
    }
  })

  render() {

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

  }
}

Custom Components

You can pass custom components to further customize the table:

import React from "react";
import Chip from '@mui/material/Chip';
import MUIDataTable, { TableFilterList } from "mui-datatables";

const CustomChip = ({ label, onDelete }) => {
    return (
        <Chip
            variant="outlined"
            color="secondary"
            label={label}
            onDelete={onDelete}
        />
    );
};

const CustomFilterList = (props) => {
    return <TableFilterList {...props} ItemComponent={CustomChip} />;
};

class CustomDataTable extends React.Component {
    render() {
        return (
            <MUIDataTable
                columns={columns}
                data={data}
                components={{
                  TableFilterList: CustomFilterList,
                }}
            />
        );
    }
}

Supported customizable components:

  • Checkbox - A special 'data-description' prop lets you differentiate checkboxes Example. Valid values: ['row-select', 'row-select-header', 'table-filter', 'table-view-col'].The dataIndex is also passed via the "data-index" prop.
  • ExpandButton Example
  • DragDropBackend
  • TableBody
  • TableViewCol - The component that displays the view/hide list of columns on the toolbar.
  • TableFilterList - You can pass ItemComponent prop to render custom filter list item.
  • TableFooter
  • TableHead
  • TableResize
  • TableToolbar
  • TableToolbarSelect
  • Tooltip
  • icons - An object containing optional replacement icon classes for the actions toolbar. Example
    • SearchIcon
    • DownloadIcon
    • PrintIcon
    • ViewColumnIcon
    • FilterIcon

For more information, please see this example. Additionally, all examples can be viewed live at our CodeSandbox.

Remote Data

If you are looking to work with remote data sets or handle pagination, filtering, and sorting on a remote server you can do that with the following options:

const options = {
  serverSide: true,
  onTableChange: (action, tableState) => {
    this.xhrRequest('my.api.com/tableData', result => {
      this.setState({ data: result });
    });
  }
};

To see an example Click Here

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",
      columnHeaderTooltip: column => `Sort for ${column.label}`
    },
    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: "row(s) selected",
      delete: "Delete",
      deleteAria: "Delete Selected Rows",
    },
  }
  ...
}

Contributing

Thanks for taking an interest in the library and the github community!

The following commands should get you started:

npm i
npm run dev

open http://localhost:5050/ in browser

After you make your changes locally, you can run the test suite with npm test.

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.

mui-datatables's People

Contributors

andfs avatar angus-88 avatar ashfaqnisar avatar avd6977 avatar deloreanz avatar dependabot[bot] avatar domind avatar dragomir-ivanov avatar ericpyle avatar gabrielliwerant avatar garronej avatar gregnb avatar guyshaanan avatar innuceean avatar jdetle avatar lalong13 avatar lancerael avatar lbressler13 avatar legogris avatar loganasherjones avatar lounsbrough avatar luluhoc avatar mbcsdave avatar n3tr avatar patorjk avatar pkmnct avatar skn0tt avatar tgbryanbailes avatar wdh2100 avatar zxhmike avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Forkers

jungrafael dmtrkovalenko billel-boudchicha mantisware sheksingh tangerineglobal tux-tn raysheikh kulakowka teadams jkantr samsch dustingraves harryluo91 caincobain supra28 jdbalistreri gborges0727 codedrainer 0soft terenced jmarucha sbilston ajorwal jpmillan ssolanki rewattpower waltercassiano polyrob ccurtin tyrsensei crava2199 vitalyobolensky ncrypthic nidheeshdas apiopoly yotamberk gauss-inc aguamar mahieddine ejazkhan10 millnitz angelomedeiros revskill10 pasihakkinen mehmetboraezer diaver d-gubert apercas danosbi develanton amorgancoretec giovanisleite geewee ajzeigert dtupalov ocetnik geekashu phelion sergeyursul nikhilem rnugraha diegochavez mattiaseyram mpareja legogris saeedezzati the-noob juddey bobcfd yerguden smebizdev lukas-zech-software saneef dyoung522 manniru pixel-perfect-metodology aneekroy joaoaguiam rohitsahumca tracemeinc straubartur bar7b mgolkardev exoforce24 psykar nawbean loganasherjones rijulaggarwal16 innucesolutions cendyandreoli rahulkumarsaini greghaygood aaron-lei abrhim lorena-cerbino saintent execomsrl jkeruzec nabeelaxr

mui-datatables's Issues

Uncaught Error: t.render(): A valid React element (or null) must be returned.

Config

import React  from 'react';
import MUIDataTable from 'mui-datatables';

class TeamV2 extends React.Component {

  render () {

    const columns = ["Name", "Title", "Location", "Age", "Salary"];

    const data = [
      ["Gabby George", "Business Analyst", "Minneapolis", 30, "$100,000"],
      ["Aiden Lloyd", "Business Consultant", "Dallas", 55, "$200,000"],
      ["Jaden Collins", "Attorney", "Santa Ana", 27, "$500,000"],
      ["Franky Rees", "Business Analyst", "St. Petersburg", 22, "$50,000"],
      ["Aaren Rose", "Business Consultant", "Toledo", 28, "$75,000"],
      ["Blake Duncan", "Business Management Analyst", "San Diego", 65, "$94,000"],
      ["Frankie Parry", "Agency Legal Counsel", "Jacksonville", 71, "$210,000"],
      ["Lane Wilson", "Commercial Specialist", "Omaha", 19, "$65,000"],
      ["Robin Duncan", "Business Analyst", "Los Angeles", 20, "$77,000"],
      ["Mel Brooks", "Business Consultant", "Oklahoma City", 37, "$135,000"],
      ["Harper White", "Attorney", "Pittsburgh", 52, "$420,000"],
      ["Kris Humphrey", "Agency Legal Counsel", "Laredo", 30, "$150,000"],
      ["Frankie Long", "Industrial Analyst", "Austin", 31, "$170,000"],
      ["Brynn Robbins", "Business Analyst", "Norfolk", 22, "$90,000"],
      ["Justice Mann", "Business Consultant", "Chicago", 24, "$133,000"],
      ["Addison Navarro", "Business Management Analyst", "New York", 50, "$295,000"],
      ["Jesse Welch", "Agency Legal Counsel", "Seattle", 28, "$200,000"],
      ["Eli Mejia", "Commercial Specialist", "Long Beach", 65, "$400,000"],
      ["Gene Leblanc", "Industrial Analyst", "Hartford", 34, "$110,000"],
      ["Danny Leon", "Computer Scientist", "Newark", 60, "$220,000"],
      ["Lane Lee", "Corporate Counselor", "Cincinnati", 52, "$180,000"],
      ["Jesse Hall", "Business Analyst", "Baltimore", 44, "$99,000"],
      ["Danni Hudson", "Agency Legal Counsel", "Tampa", 37, "$90,000"],
      ["Terry Macdonald", "Commercial Specialist", "Miami", 39, "$140,000"],
      ["Justice Mccarthy", "Attorney", "Tucson", 26, "$330,000"],
      ["Silver Carey", "Computer Scientist", "Memphis", 47, "$250,000"],
      ["Franky Miles", "Industrial Analyst", "Buffalo", 49, "$190,000"],
      ["Glen Nixon", "Corporate Counselor", "Arlington", 44, "$80,000"],
      ["Gabby Strickland", "Business Process Consultant", "Scottsdale", 26, "$45,000"],
      ["Mason Ray", "Computer Scientist", "San Francisco", 39, "$142,000"]
    ];

    const options = {
      filterType: 'dropdown',
      responsive: 'stacked'
    };

    return (
      <MUIDataTable
        title={"ACME Employee list"}
        data={data}
        columns={columns}
        options={options}
      />
    );
  }
}

export default TeamV2

Issue

util.js:546 Uncaught Error: t.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.
    at invariant (invariant.js:42)
    at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:828)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:359)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:255)
    at Object.mountComponent (ReactReconciler.js:43)
    at ReactCompositeComponentWrapper._updateRenderedComponent (ReactCompositeComponent.js:762)
    at ReactCompositeComponentWrapper._performComponentUpdate (ReactCompositeComponent.js:721)
    at ReactCompositeComponentWrapper.updateComponent (ReactCompositeComponent.js:642)
    at ReactCompositeComponentWrapper.receiveComponent (ReactCompositeComponent.js:544)
    at Object.receiveComponent (ReactReconciler.js:122)
invariant @ invariant.js:42
_renderValidatedComponent @ ReactCompositeComponent.js:828
performInitialMount @ ReactCompositeComponent.js:359
mountComponent @ ReactCompositeComponent.js:255
mountComponent @ ReactReconciler.js:43
_updateRenderedComponent @ ReactCompositeComponent.js:762
_performComponentUpdate @ ReactCompositeComponent.js:721

Your Environment

Tech Version
mui-datatables 1.0.9
node 5.5.1
OS Windows 10

Package dependecies

"dependencies": {
    "animated": "^0.2.2",
    "aphrodite": "^1.2.5",
    "classnames": "^2.2.5",
    "date-and-time": "^0.6.2",
    "eventsource-polyfill": "^0.9.6",
    "firebase": "^4.11.0",
    "jquery": "^3.3.1",
    "lodash": "^4.17.5",
    "material-ui": "^1.0.0-beta.37",
    "material-ui-icons": "^1.0.0-beta.36",
    "normalize.css": "^7.0.0",
    "object-assign": "^4.1.1",
    "promise": "^7.1.1",
    "prop-types": "^15.5.10",
    "react": "^15.5.4",
    "react-collapsible": "^2.0.4",
    "react-dom": "^15.5.4",
    "react-firebase-file-uploader": "^2.4.1",
    "react-magic": "^0.2.3",
    "react-number-format": "^3.1.6",
    "react-redux": "^5.0.7",
    "react-redux-firebase": "^2.0.5",
    "react-router": "^3.0.0",
    "react-tap-event-plugin": "^2.0.1",
    "react-transition-group": "^2.2.1",
    "react-router-dom": "^4.2.2",
    "google-map-react": "^0.34.0",
    "recompose": "^0.26.0",
    "redbox-react": "^1.3.6",
    "redux": "^3.7.2",
    "redux-auth-wrapper": "^1.0.0",
    "redux-form": "^6.6.1",
    "redux-form-material-ui": "^5.0.0-beta.2",
    "redux-thunk": "^2.2.0",
    "whatwg-fetch": "^2.0.3",
    "mui-datatables": "^1.0.9"
  },

Feature Request: more fine grained pagination options

Issue

My db has tons of entries, and I'd like to be able to skip pages similar to how sites like Amazon have numbers between their next/previous page options
Example:
at the bottom of the page have:
< 1,a,b...c,d,96 >
where
a and b are 10 and 5 pages back from current page respectively (or disappear when <15 pages in)
c and d are 5 and 10 pages ahead of current page respectively (or disappear when <15 pages from the end, being the 6th page)

Your Environment

Tech Version
mui-datatables 1.0.9
node 9.x
OS Linux

Filter concatinate same values

Issue

Hey, I'm having an issue with the filter.

I am filtering ~6000 items, and when I click the upside down triangle that shows filter options, the page halts. I have many items with the same value in some fields (eg, location USA), and I'm wondering if there's a way to concatinate/reduce all the duplicate locations in the filter option (possibly before a render even occurs to save time like in componentWillMount) to the 8 or so unique locations I have? In your example I see you have locations, so maybe I am just missing something in the docs... I'm also assuming the column filter option to hide unwanted filter options is not adding to why I'm getting a halt
(by halt, I mean the browser freezes until a message pops up saying a script on this page is running for an unusually long time, and I can either stop it or wait)

Your Environment

Tech Version
mui-datatables 1.0.8
node 9.1.2
OS Arch Linux

More details on how onRowsSelected relates to data in grid

Issue

I understand that the onRowsSelected callback returns the index of which checkbox was last ticked/unticked, as well as the indices of all currently selected items. When I tick a checkbox and then sort the rows in a different way, the index of the row changes.
Example:
Row 1: bob, smith
Row 2: john, apple

If I click the box for row 1, it will console log: [0], [0]
If I then say sort by surname, ascending, and untick the ticked row 1 box, it will console log: [1],[1]

With this in mind, how am I supposed to get information out of a selected row (eg make a json obj out of the row when tickbox is ticked) and how can I use the array of all currently selected items when I have stuff like server side pagination only sending the current page to screen (IE storing which items have been previously selected on the server).

Thoughts: Assuming there is a way to get a json obj of the row currently being ticked/unticked, it would be easy to just store a selectedItems array server side, I am just not sure how to pull a row to then send to server

Your Environment

Tech Version
mui-datatables lateast
node latest
OS arch linux

Browser Issues

Are there browser considerations? In Edge, it is absolutely beautiful. In chrome, the table is on it's side. (attached)
chrome

how to hande the rows json

How to handle the array received from the server in the component?

example:

columns =>

  {
   name: "Id", // I need to put the translation and identify the field received
   options: {
    filter: true,
    sort: true,
   }
  },
  {
   name: "name",
   options: {
    filter: true,
    sort: false,
   }
  },
  {
   name: "active",
   options: {
    filter: true,
    sort: false,
   }
  }

rows =>
{id: 1, name: "test", active: true}
{id: 1, name: "example", active: true}

Hide a column completely

Hi,

first of all I want to thank you for putting this project together.

Is there a way to hide a column completely from the view columns filter?
Currently If i use a column to store a key, the filter false option will hide it but it will still show up under view columns filter as unchecked.
Or if i use blank column to add a button, it still shows up under the view column as a checked column. Is there a way to completely hide the column in the view column filter?

Thanks,

Ray

A valid React element (or null) must be returned.

Config

 <MUIDataTable
            title={'API Catalog'}
            data={tableData}
            columns={tableColumns}
            options={tableOptions}
          />

Issue

I've got a bare bones example running and I keep getting an error saying t.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

I've just got the data set up as an array of arrays, and options are basically nothing. Some of the table control appears for a few seconds before switching to a browser error page. No idea what's happening.

Your Environment

Tech Version
mui-datatables latest
node 6.11
OS High Sierra
react 15.6

More control over MUIDataTableToolbarSelect popping up...

Issue

I'd like to be able to change the top bar that renders when a row is selected (containing a trashbin icon and "x rows selected"), so instead of showing a delete icon, it will show a custom button I've made to do my own function. In other words, the onRowsSelect function should allow developers more control over what shows up when a checkbox is ticked.
My reason for this:
If I have users using this table, I'd like to prevent them from seeing/being able to delete rows in the table, but instead have my own options of what should happen when a row is selected.

Your Environment

Tech Version
mui-datatables 1.1.2
node 9.2.1
OS Linux

Small suggestion for documentation - data can not contain nulls

I hooked up the table to the result of a database which contained nulls. It caused on error which I easily fixed. Small suggested to note in the document that the data cannot contain nulls.

This UI is absolutely incredible. thank you for making it available.

customRender - index variable the row number? Can I get the column?

I tested out custom Render and I believe the index passed to my function is the index of the row. Is there a way to get access to the column?

I'm trying to build a way to "in line edit" a cell. Use case
a) user clicks on cell
b) cell changes to input box
c) when user leaves cell, update function is called

Help convert Json into simple Array

Hey Everyone,

I'm using the function below to convert json data from my API into simple array. Hope this helps someone.
maybe we can incorporate this function as an enhancement.

Json is the variable i created to receive Json array from my API call

var array = Json.map(({ Name, Title, Location, Age, Salary}) => ([Name, Title, Location, Age, Salary]))

Thanks

Question: Why does MUIDataTableBodyCell return 2 table cells

Hi, thank you for this wonderful project.

I'm wondering why the rendor of MUIDataTableBodyCell returns 2 table cells? I see that you give them eys... but I can't find references to using these keys anywhere. Thank you
`
class MUIDataTableBodyCell extends React.Component {
render() {
const { children, classes, columnHeader, options, ...otherProps } = this.props;
return [
<TableCell
key={1}
className={classNames({
[classes.root]: true,
[classes.cellHide]: true,
[classes.cellStacked]: options.responsive === "stacked",
})}>
{columnHeader}
,
<TableCell
key={2}
className={classNames({
[classes.root]: true,
[classes.responsiveStacked]: options.responsive === "stacked",
})}
{...otherProps}>
{children}
,
];
}
'
| |

Table only render first page of data after disable pagination

I'm going to implement a table which doesn't use pagination, so I set pagination=false in option, but the table only render the first page. Is there anyway to make the table render whole data set? So, for example, rowsPerPage=10000 and we have a table height be set and just scroll the table straightly.

Enhancement: Allow for excluded, hidden, or 'never visible' columns

Add third column visibility option

Right now if you include a column of data and set options: { display: false } the column is hidden, but it's still available to be displayed via the "view columns" menu in the UI. Sometimes rows need related data that never needs to be displayed (nor should it be) but is necessary for things like calculations or end-user display customization.

Use Case

  • John is creating a table to display a list of Users.
  • This table includes a "Post Count" column which is the count (a number) of the total "Posts" belonging to a user.
  • John would like to style this cell so that the number of posts is a link that navigates to a related table (the "Posts" table) filtered to only show posts from the User of that row. For instance, that table could be located at a path such as /posts/?userId=${userId}
  • userId relates the Users and Posts data. John does not want to display the userId in a column or have it be selectable in 'view columns' menu, as it brings no value to be displayed for the user in the UI.
  • John creates a mui-tables column definition for the userId in both the Users and Posts table and marks it as hidden or excluded, so that it is accessible to the customRender function, but does not clutter the UI.

Implementation

One clean way to implement is by adding an additional column option such as excluded, hidden, or private which is a bool that excludes it from the 'view columns' UI menu. This is similar to how the filter: false column setting excludes it from the filter menu. In that way, display would still control whether the column is showing or not, but this new option would affect whether the user is allowed to change the column showing or not via the 'view columns' menu. Coincidentally, this would allow for an additional use case, where you would like to display a column that a user can not hide.

Another possibility, we could change display to a string type with enum('true', 'false', 'excluded') .. or possibly hidden instead of excluded. And then (to avoid a breaking change) just do a type check and, on boolean, use the old behavior.

[Feature Request] Controlled components

Feature request of controlled component state. Let users a way to manage the data.
It should be really helpful because a lot of where its really helpful to manage the sorting/filtering via react state.
BTW in a lot of projects are using persisting state of tables to save sortings/column width and selection of users.
I`m happy to open a PR if you will accept. :)

Table no longer works

Issue

I've just updated to material-ui beta 40 and react 16.3.1, and now none of the buttons (filter table dropdown, columns dropdown) work, and the trashcan icon on rows selected is not correctly aligned

Your Environment

Tech Version
mui-datatables 1.1.3
node latest
OS Arch Linux

Feature Request: sliders in dropdown

Config

Issue

I'd like to know if you could include sliders for the filtering, so if a column contains numbers it would be possible to slide the two endpoints of the slider up or down

Example:
column contains number 1-10
in dropdown, slide left point up to 2, slide right point down to 7
result: only rows with that column value being between 2 and 7 now show

Your Environment

Tech Version
mui-datatables 1.0.9
node 9.x
OS Linux

Page is greater than the total available

Hi, I'm having some problems using this library.

When I'm on the second page, or ahead and I make a search that should return less pages than the one I'm on, I get the following error:

Provided options.page of 1is greater than the total available page length of0``

And here is my code:

`export default class test extends React.Component {

constructor(props) {
    super(props);
    this.changePage = this.changePage.bind(this);
    this.state = {
        columns: ["foo", "bar", "ho", "hey", "ho", "let's", "Go", ""],
        data: this.tratarDados(ultimosCoisosStore.getUltimosCoisos()),
        options: {
            responsive: 'scroll',
            selectableRows: false,
            filter: false,
            print: false,
            download: false,
            rowsPerPageOptions: [5,10,15],
            page: 0
        }
    }
    this.updateData = this.updateData.bind(this);
    this.tratarDados = this.tratarDados.bind(this);
    this.returnIcones = this.returnIcones.bind(this);
    this.refreshList = this.refreshList.bind(this);

    coisoDispatcher.handleAction({
        type: 'UPDATE_ULTIMOS_PEDIDOS'
    });
}

componentDidMount() {
    ultimosCoisosStore.addChangeListener('ULTIMOS_COISOS_UPDATED', this.updateData);
    coiso.addChangeListener('REFRESH_LIST_ULTIMOS_COISOS', this.refreshList);
}

componentWillUnmount() {
    coiso.removeChangeListener('REFRESH_LIST_ULTIMOS_COISOS', this.refreshList);
    ultimosCoisosStore.addChangeListener('ULTIMOS_COISOS_UPDATED', this.updateData);
}

tratarDados(data) {
    let temp = [];
    for (var x in data) {
        let data_temp = Object.values(data[x]);
        data_temp[1] = parseFloat(data_temp[1]);
        //data_temp[2] = moment(data_temp[2]).format("DD/MM/YYYY HH:mm:ss");
        let icones = this.returnIcones(data_temp[6], x, data_temp[7]);
        data_temp.pop();
        data_temp.push(icones);
        temp.push(Object.values(data_temp));
    }
    return temp;
}

returnIcones(status, id, show_delete) {
    if (status === 3 || status === 4) {
        return (
            <BotoesOk key={id} nf_id={id} status={status} ok={true} show_delete={show_delete}/>
        )
    }
    else {
        return (
            <BotoesOk key={id} nf_id={id} status={status} ok={false} show_delete={show_delete}/>
        )
    }
}

refreshList() {
    //this.setState({options.page: 0});
    pdvDispatcher.handleAction({
        type: 'UPDATE_ULTIMOS_COISOS'
    });
}

updateData() {
    let dados = this.tratarDados(ultimosCoisosStore.getUltimosCoisos());
    this.setState({data: dados});
}

render() {
    return (
        <Rodal onClose={this.props.hideModal} className="ultimos-coisos-modal" visible={true} width={1200} >
            <MUIDataTable key={Math.random()} title={"Últimos Coisos"} data={this.state.data} columns={this.state.columns} options={this.state.options} />
        </Rodal>
    )
}

}`

Could someone help me unsderstand what is happening?

Show/Hide Options Filter, Print, Download

Hi, I just implemented the library in my project and it's amazing! but I have a question with the props options, filter, print etc since I put the false boolean to hide them but in the same way render the icons

Advice? -- Inline Updates

I've used customRender to do inline edits to data in individual cells.

It seems like I have these options for after i call the server

  1. Visually, the value has changed in the table. I can trust that the server updated the data correctly and continue with the same data array.
  2. I can update the state of my data array, which will force a new render of MUIDataTable. All my sorts go away.
  3. If there are errors from the server, I can catch them and diplay a red "The update did not work" on the top of the screen. The screen will still have the new value, but I've given a visual cue to the user that something went wrong.

I'm leaning toward 3, but would like to hear what people think.

Question add/remove or modify Icons on selected rows

Good morning,

Is there a way to add new Icons when selecting a row. Currently there is a delete Icon. I'd like to add an edit or more info icon somewhere and pop a Modal to extract row information. It seems only way to extract row info is by selecting the row and using an onRowsSelect function. Is there another way to extract the row information and display it in a popup Modal? if so I can nest a custom button using customRender function.

Thanks for all your work.
Ray

Question Material-ui-icons module not found

Hi,
I'm getting an error "material-ui-icons/clear" not found. After some research i found the material-ui-icons no longer exists. it has been changed to @material-ui/icons. Could this be related?

Thanks,

Ray

Compatablity Issue?

I'm wondering if I have a compatibility issue.

Theses are the versions I have
"material-ui": "^1.0.0-beta.47",
"mui-datatables": "^2.0.0-beta-6",

I get the following error when I try to follow your example:
./node_modules/mui-datatables/dist/index.js
Module not found: Can't resolve '@material-ui/core/Checkbox' in 'C:\Users\tracy\resrent-interface-tracking-ui\node_modules\mui-datatables\dist'

Funny, I checked and my material-ui does have a Checkbox.

Toolbar style property has different object mapping compare to docs

I want to add a bottom border to the toolbar. if I follow the documentation it's not working. the following one is worked for me.

Config

This is my workaround for toolbar style issue.

styles: {
        table: {
            toolbar: {
                root: {
                    borderBottom: '1px solid #e4e4e4'
                },
                search: {
                    searchText: {
                        color: 'red'
                    }
                }
            }
        }
}

Components inside table

Issue

Could we have a way of adding our own components to the table? We could just add it to the data variable. With the same API, we would be able to add text or a component.

Your Environment

Tech Version
mui-datatables 1.0.7
node 8.7.0
OS Ubuntu 17.10

“View Columns” and "Filter Table" icons not show with HMR (react-hot-loader)

Config

/**
 * Data Table
 */
/* eslint-disable */
import React from 'react';
import MUIDataTable from "mui-datatables";

// page title bar
import PageTitleBar from '../../../components/PageTitleBar/PageTitleBar';

// rct card box
import RctCollapsibleCard from '../../../components/RctCollapsibleCard/RctCollapsibleCard';

// intl messages
import IntlMessages from '../../../util/IntlMessages';

class DataTable extends React.Component {
  render() {
    const columns = ["Name", "Title", "Location", "Age", "Salary"];
    const data = [
      ["Gabby George", "Business Analyst", "Minneapolis", 30, "$100,000"],
      ["Aiden Lloyd", "Business Consultant", "Dallas", 55, "$200,000"],
      ["Jaden Collins", "Attorney", "Santa Ana", 27, "$500,000"],
      ["Franky Rees", "Business Analyst", "St. Petersburg", 22, "$50,000"],
      ["Aaren Rose", "Business Consultant", "Toledo", 28, "$75,000"],
      ["Blake Duncan", "Business Management Analyst", "San Diego", 65, "$94,000"],
      ["Frankie Parry", "Agency Legal Counsel", "Jacksonville", 71, "$210,000"],
      ["Lane Wilson", "Commercial Specialist", "Omaha", 19, "$65,000"],
      ["Robin Duncan", "Business Analyst", "Los Angeles", 20, "$77,000"],
      ["Mel Brooks", "Business Consultant", "Oklahoma City", 37, "$135,000"],
      ["Harper White", "Attorney", "Pittsburgh", 52, "$420,000"],
      ["Kris Humphrey", "Agency Legal Counsel", "Laredo", 30, "$150,000"],
      ["Frankie Long", "Industrial Analyst", "Austin", 31, "$170,000"],
      ["Brynn Robbins", "Business Analyst", "Norfolk", 22, "$90,000"],
      ["Justice Mann", "Business Consultant", "Chicago", 24, "$133,000"],
      ["Addison Navarro", "Business Management Analyst", "New York", 50, "$295,000"],
      ["Jesse Welch", "Agency Legal Counsel", "Seattle", 28, "$200,000"],
      ["Eli Mejia", "Commercial Specialist", "Long Beach", 65, "$400,000"],
      ["Gene Leblanc", "Industrial Analyst", "Hartford", 34, "$110,000"],
      ["Danny Leon", "Computer Scientist", "Newark", 60, "$220,000"],
      ["Lane Lee", "Corporate Counselor", "Cincinnati", 52, "$180,000"],
      ["Jesse Hall", "Business Analyst", "Baltimore", 44, "$99,000"],
      ["Danni Hudson", "Agency Legal Counsel", "Tampa", 37, "$90,000"],
      ["Terry Macdonald", "Commercial Specialist", "Miami", 39, "$140,000"],
      ["Justice Mccarthy", "Attorney", "Tucson", 26, "$330,000"],
      ["Silver Carey", "Computer Scientist", "Memphis", 47, "$250,000"],
      ["Franky Miles", "Industrial Analyst", "Buffalo", 49, "$190,000"],
      ["Glen Nixon", "Corporate Counselor", "Arlington", 44, "$80,000"],
      ["Gabby Strickland", "Business Process Consultant", "Scottsdale", 26, "$45,000"],
      ["Mason Ray", "Computer Scientist", "San Francisco", 39, "$142,000"]
    ];
    const options = {
      filterType: 'dropdown',
      responsive: 'stacked'
    };
    return (
      <div className="data-table-wrapper">
        <PageTitleBar title={<IntlMessages id="sidebar.dataTable" />} match={this.props.match} />
        <div className="alert alert-info">
          <p>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, 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. If you want more customize option please <a href="https://github.com/gregnb/mui-datatables" className="btn btn-danger btn-small mx-10">Click </a> here</p>
        </div>
        <RctCollapsibleCard heading="Data Table" fullBlock>
            <MUIDataTable title={"Employee list"} data={data} columns={columns} options={options} />
        </RctCollapsibleCard>
      </div>
    );
  }
}

export default DataTable;

Issue

In last five days it's display filter and view column icon but now I have installed it and run with npm start it doesn't show. Why it's may happening .

Your Environment

Tech Version
mui-datatables 1.1.7
node 9.0
OS Ubuntu 16.04 LTS

Custom stuff while table data is loading

Hello,

When the data for the table is loading, users see "Sorry, no matching records found" for a couple seconds while it is fetching.

Is there any way to modify this to have our own loading stuff while waiting for data to load?

Thanks

Specifying Width of column

Is there a way to specify the width of a column? Or tell it to be the size of the text, with a little bit of margin.

Use case

  1. I've added Edit and Delete columns to my table with Edit/Delete Icons
  2. I would like these column widths to be just a little bit bigger than the icons

Thanks,
Tracy

Buttons in columns

Issue

Not sure how possible this would be, but I am trying to have a column containing a "preview" button for each row, such that when the button is clicked, I open a preview frame displaying a picture and other details related to a row item.

Example: row contains {preview: <material ui preview button>, name: "John", occupation: "miner"}
On preview click, the data in the current row is sent to an iframe/window/popup that is populated with information relating to the row (for example, a templated html page talking about miners and people named John in this case)
When I try to directly push a material-ui button component into the rows, I get an error

TypeError: t[r] is undefined
in t (created by WithStyles(t)) in WithStyles(t)

Is there a known way to insert this kind of button into each row and relate it to the row, or would this be functionality that needs to be added?

Filter Icon

How can I change that Filter Icon on the right-hand side? And I want to remove some Items in the last filter. Is it possible in MUI Datatable??

Tech Version
mui-datatables
node 8
OS Mac

Is there a way to disable default behavior for certain actions when providing callbacks?

HI and thank you for you work on the component.
I would like to us this table in my project but i want the data to be requested from server every time i perform search or sort.
I can do this by providing my own callbacks and create new request, fetch data and populate table.
But at the same time for example when searching the table rerenders with local data.
Is there a way to disable this when providing callbacks for actions like search or sort?
Thanks.

Error loading array of objects - Bug or New Feature needed?

Config

import React from 'react';
import ReactDOM from "react-dom";
import MUIDataTable from "mui-datatables";

class App extends React.Component {

render() {

const columns = ["Name", "Title", "Location", "Age", "Salary"];

const data = [
  {name: "Gabby George", title: "Business Analyst", location: "Minneapolis", age: 30, salary: "$100,000"}      
];

const options = {
  filterType: 'dropdown',
  responsive: 'stacked'
};

return (
  <MUIDataTable 
    title={"ACME Employee list"} 
    data={data} 
    columns={columns} 
    options={options} 
  />
);

//return <div>a</div>;

}

}

ReactDOM.render(, document.getElementById("root"));

Issue

First of all - Thanks for the great component! Works very well with data as array of strings (as documentation says). However I'm very surprised that it doesn't work with array of objects loaded from the back-end.
"Uncaught (in promise) TypeError: e.map is not a function"

I was able to create a simple MUI table component that works fine with array of data. However yours is way more advanced and I would love to use it for my project.
Is this a bug or I'm missing something as I'm still learning react? Or it's simply not implemented yet as both - documentation and examples specifically say array of simple strings. Do I really need to convert my data to array of simple strings?

Your Environment

Tech Version
mui-datatables 1.1.2
node 6.11.13
OS Win7

How can i pass object instead of array? Is there any option available?

Config

import React, { Component } from 'react';
import MUIDataTable from "mui-datatables";

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

const data = [
{ name: 'Some Text', company: 'Github', city: 'Some Text', state: 'Some Text' },
{ name: 'Some Text', company: 'Github', city: 'Some Text', state: 'Some Text' },
];

const options = {
    rowsPerPage: 5,
    styles: {
        table: {
            toolbar: {
                root: {
                    borderBottom: '1px solid #e4e4e4'
                },
                search: {
                    searchText: {
                        color: 'red'
                    }
                }
            }
        }
    }
};
class MUITable extends Component {
    render() {
        return (
            <div>
                <MUIDataTable 
                    title={"Employee List"} 
                    data={data} 
                    columns={columns} 
                    options={options} 
                />
            </div>
        );
    }
}

export default MUITable;

Issue

I would like to populate a table via an object, but it doesn't work. I got the following error.
mui-datatable-array-insteadof-object

Your Environment

Tech Version
mui-datatables 1.0.7
node 9.5.0
OS Windows 7 SP 1

Feature Request: Selectable Rows

As far as I can tell there isn't an interface to access rows or bind actions to them. Any plans on implementing this?

Thanks for your work on this!

Small Typo?

When I select a checkbox, it says "1 row deleted" and has a trash can on the right.

I believe this should say "1 row selected" because the row is not actually deleted until you hit the trash can.
deleted

Set columns width

Issue

Would it be possible to have per column the option to set its width?
That could be an option passed together with the columns array.

Your Environment

Tech Version
mui-datatables 1.0.7
node 8.7.0
OS Ubuntu 17.10

JSON loader method

Config

Issue

If possible, creating a JSON loader method where people can submit a headings object and rows object would be nice. This loader would autoload and map the rows under the given headings based on the keys of each object.

Example:

{
  {Headings:[
     "X",
     "Y",
     "Z"
  ]}
  {Users:[
    {
      "X":1,
      "Y":2,
      "Z":3
    }
    {
      "X":4,
      "Y":5,
      "Z":6
    }
  ]}
}

Your Environment

Tech Version
mui-datatables 1.0.8
node 9.2.1
OS Arch Linux

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.