React Material - mui-datatables - how to add content in column header

Question

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

Muhammad Zeeshan · Accepted Answer · 2020-01-18 15:36:05Z

1

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)}
        />
     )
  }
}

answered Jan 18, 2020 at 15:36

Muhammad Zeeshan

4,7784 gold badges19 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Matexon Over a year ago

one more question - is it possible to add button only to the last column HEADER but the remaining rows in that column should contain data from data variable (like in other rows in other columns)

Matexon Over a year ago

Ok I have solution for my problem - I have to use customHeadRender instead :)

Khabir · Accepted Answer · 2020-03-30 18:48:55Z

0

You need to use customHeadRender

const columns = [
    {
        name: "id",
        label: "Id",
        options: {
            filter: false,
        }
    },
    {
        name: "subject",
        label: "Subject",
        options: {
            filter: true,
            sort: false,
        }
    },
    {
        name: "button",
        options: {
            customHeadRender: ({index, ...column}) => {
                return (
                    <Button key={index}>
                        Click
                    </Button>
                )
            }
        }
    }
];

answered Mar 30, 2020 at 18:48

Khabir

5,8781 gold badge26 silver badges38 bronze badges

Collectives™ on Stack Overflow

React Material - mui-datatables - how to add content in column header

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related