reactjs 多数据表隐藏列标题

thtygnil 于 2023-04-20 发布在 React

关注(0)|答案(4)|浏览(156)

使用materialui-datatables包，有没有办法切换列标题？我看到了覆盖自定义样式的示例，但在站点API中找不到选项。
示例是沙箱中的here。
我的当前表看起来像这样：

const columns = [
        {
            name: "Question",
            label: "",
            options: {
                someOptionToToggle: true
            },
        }, 
        {
            name: "Answer",
            label: ""        
        }
    ]; 
 const options = {
        filter: false,
        responsive: "scroll",
        download: false,
        sort: false,
        selectableRows: false,
        print: false,
        viewColumns: false,
        searchOpen: true,
        searchText: searchText,
        search: false,
        customSearchRender: () => null
    }; 
<MUIDataTable
      title={""}
      data={faqData}
      columns={columns}
      options={options}
/>

看起来label选项在设置为空的情况下会提供这个选项，但是标题名称仍然存在。我已经尝试了列选项中的各种其他属性，这可能吗？

reactjs

来源：https://stackoverflow.com/questions/66788113/mui-datatables-hide-column-headers

4条答案

按热度按时间

gkn4icbw1#

customHeadRender函数用于自定义header，要完全删除它，您可以从它返回null：options:{customHeadRender: ()=>null}

赞(0）回复(0）举报 2023-04-20

jhiyze9q2#

MUI版本5.2.3

import { DataGrid as MuiDataGrid } from "@mui/x-data-grid";

const DataGrid = styled(MuiDataGrid)(({ theme }) => ({
  "& .MuiDataGrid-columnHeaders": { display: "none" },
  "& .MuiDataGrid-virtualScroller": { marginTop: "0!important" },
}));

export default function DataTable() {
  return (
    <div style={{ width: "100%" }}>
      <DataGrid autoHeight rows={rows} columns={columns} />
    </div>
  );

赞(0）回复(0）举报 2023-04-20

hgc7kmma3#

最新版本5.17.9

<DataGrid
   components={{
     Header: () => null,
   }}
/>

赞(0）回复(0）举报 2023-04-20

fcipmucu4#

到目前为止，在最新的MUI版本中，您可以使用slots/slotsProps来自定义DataGrid。
component/componentProps现在已弃用。
更多信息：https://mui.com/x/react-data-grid/components/#overriding-components
slots props允许您自定义列标题，您可以返回null来隐藏它。
示例：

<DataGrid
  slots={{
    columnHeaders: () => null,
  }}
/>

赞(0）回复(0）举报 2023-04-20

我来回答

reactjs 多数据表隐藏列标题

4条答案

相关问题

热门标签

最新问答