React Material - MUIDataTable - как добавить содержимое в заголовок столбца

Question

Я использую в своем приложении React:

import MUIDataTable from "mui-datatables";

Я хотел бы добавить некоторую кнопку в заголовок моего последнего столбца (вместо имени столбца):

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

, где столбцы:

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

Как это сделать? Является ли это возможным? Я ничего не могу найти

Answer 1

Вы можете определить собственное тело для столбца. Вы можете добавить столбец так:

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

Answer 2

Вам нужно использовать 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>
                )
            }
        }
    }
];