gregnb / mui-datatables

Datatables for React using Material-UI
MIT License
2.71k stars 932 forks source link

Column without name throws error #953

Open aflansburg opened 5 years ago

aflansburg commented 5 years ago

This may not necessarily be a bug as much as it is lack of functionality (love this library by the way) - but if you provide a column without a name an error is thrown. In my use case I use an unnamed column to provide a button for viewing more details about a row item. Current workaround is to provide empty string to name attribute in column:

Error appears to occur here in transformData: https://github.com/gregnb/mui-datatables/blob/9c79bedc73dcff72453d0059107a59f6548977fb/src/MUIDataTable.js#L446

Expected Behavior

Providing an unnamed column for the column options should not throw an error.

Current Behavior

Providing an unnamed column throws an error. Current workaround is to provide empty string to name attribute in column:

Uncaught TypeError: Cannot read property 'split' of undefined
    at index.js:1
    at Array.map (<anonymous>)
    at index.js:1
    at Array.map (<anonymous>)
    at t.e.transformData (index.js:1)
    at t.value (index.js:1)
    at t.value (index.js:1)
    at t.value (index.js:1)
    at callComponentWillMount (react-dom.development.js:11424)
    at mountClassInstance (react-dom.development.js:11514)

Steps to Reproduce (for bugs)

  1. Provide a column object as such in the columns array passed to the table:
    {
    options: {
    download: false,
    filter: false,
    sort: false,
    viewColumns: false,
    customBodyRender: (value, tableMeta, updateValue) => {
      return (
        <Button
          onClick={() => {
            this.handleOpenItemDialog(tableMeta.rowData[0]);
          }}
        >
          View
        </Button>
      );
    }
    }
    }

Your Environment

React + React on Rails (Ruby on Rails)

Tech Version
Material-UI 4.4.3
MUI-datatables 2.11.1
React 16.8.6
browser Chrome Version 76.0.3809.132 (Official Build) (64-bit)
gabrielliwerant commented 5 years ago

Glad this project is working well for you so far!

The problem is that the name field is required. This field is used to identify the column internally. If you want to use a column for an action, you can take a look at the custom-action-columns example. The empty option allows you to avoid certain problems if the column doesn't correspond to any actual data.

There are a couple of ways to eliminate the name from the column header if you want to do that. One is to use customHeadRender:

customHeadRender: () => <th key={0} style={{ borderBottom: '1px solid rgba(224, 224, 224, 1)' }} />

Another is to set the label option (which determines the name that displays for the table header) to a space character like label: ' ', which is a little bit hacky.

I'm open to a PR that would allow setting the label option to empty string or null to prevent display of a name in the column header.