首页 > 解决方案 > React Material - MUIDataTable - 如何在列标题中添加内容

问题描述

我在我的 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,
        }
    }, (...)

怎么做?可能吗?我什么都找不到

标签: reactjsmui-datatable

解决方案


您可以为列定义自定义主体。您可以添加这样的列:

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

推荐阅读