gregnb / mui-datatables Goto Github PK

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}
,
];
}
'
| |

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!

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

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

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

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

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

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?

Somebody should open this issue :)
If you will inject support on the project start - it would be easily to support it during development.

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

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.

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??

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

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.

Your Environment

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?

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.

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

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'
                    }
                }
            }
        }
}

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.

Material-ui has an awesome control for sorting displaying - TableSortLabel, I cannot see any reason to not use it for sorting.

Config

https://codesandbox.io/s/lplo7l6q09

Issue

Checking checkboxes doesn't fire onRowsSelect event.

Your Environment

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.

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}

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

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

Config

Issue

Your Environment

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

Can customRender be the name of a function instead of the full function?

I tried and it did not work, but I may have the syntax wrong.

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

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. :)

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

Requesting a feature for server side pagination support. 👍

It don't support server side data filter and some other operations.And It must provide all the data at the first time.Dont support data load dynamic.Am i right ? Thank you very much.In the future,If it will add feature to load data dynamic.

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

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.

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

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

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"
  },

Can you make the search function case insensitive?

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

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

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

Expected Behavior

GIF example of behavior in gmail: https://i.imgur.com/qC7kuVt.gifv

The 'select all' checkbox should become a 'deselect all' checkbox (with appropriate icon change) when any selections are made.

Current Behavior

When any selection is made, no changes happen to the 'select all' button

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.

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

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

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.

Is there an easy way to localize texts in any language ?

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