禁用 React Material ui - 表排序中的一列排序

问题描述 投票:0回答:1

我正在使用这个版本的 materail ui - 可排序表。

enter image description here

我想创建一个没有排序箭头的头像栏

          {
            id: 'id',
            numeric: true,
            disablePadding: true,
            label: 'Id',
          },
          {
            id: 'avatar',
            numeric: true,
            disablePadding: true,
            label: '',
          },
          {
            id: 'name',
            numeric: false,
            disablePadding: true,
            label: 'Name',
          }

我在这里使用沙箱中的相同代码

https://mui.com/material-ui/react-table/#sorting-amp-selecting

https://codesandbox.io/embed/xdn3tn?module=/src/Demo.tsx

enter image description here

你会做什么 - 例如,如果你不想按卡路里排序 - 或者/并且你有一个嵌套行,里面有图片、名称 - 标记 - 你能让表格通过数据排序吗 -属性?

我找不到任何文档可以解决应该是小问题的问题。

<TableSortLabel
  active={orderBy === headCell.id}
  direction={orderBy === headCell.id ? order : 'asc'}
  onClick={createSortHandler(headCell.id)}
>

https://mui.com/material-ui/api/table-sort-label/

我要这样修改吗?

<TableSortLabel
  active={isActive? orderBy === headCell.id: false}
  direction={orderBy === headCell.id ? order : 'asc'}
  onClick={createSortHandler(headCell.id)}
  hideSortIcon={isActive? false:true}
>
reactjs material-ui
1个回答
0
投票

我通过添加 isActive 属性使其工作起来 --- 但唯一的问题是我必须将所有内容都添加为 true ,而不是仅仅添加它并为我不想要排序的内容设置为 false

    <TableSortLabel
      active={headCell.isActive? orderBy === headCell.id: false}
      hideSortIcon={headCell.isActive? false:true}
      direction={orderBy === headCell.id ? order : 'asc'}
      onClick={createSortHandler(headCell.id)}
    >
© www.soinside.com 2019 - 2024. All rights reserved.