Search code examples
reactjsmui-datatable

React Material - MUIDataTable - how to add content in column header


I use in my React app:

import MUIDataTable from "mui-datatables";

I'd like to add some button to my last column header (instead of the column name):

 <MUIDataTable
            data={data}
            columns={columns}
            options={options}
        >
        </MUIDataTable>

where columns:

export const columns = [
    {
        name: "name",
        label: "Nazwa",
        options: {
            filter: true,
            sort: true,
        }
    },
    {
        name: "productNumber",
        label: "Numer",
        options: {
            filter: true,
            sort: true,
        }
    }, (...)

How to do that? Is it possible? I can't find anything


Solution

  • You can define a custom body for column. You can add a column like this:

    {
      name: "Age",
      options: {
         filter: false,
         customBodyRender: (value, tableMeta, updateValue) => (
            <FormControlLabel
              control={<TextField value={value || ''} type='number' />}
              onChange={event => updateValue(event.target.value)}
            />
         )
      }
    }