redux 将“行号”添加到React管理数据网格中的列表组件

dvtswwa3  于 2022-11-12  发布在  React
关注(0)|答案(1)|浏览(115)

我的id主键字段类型是UUID,我想在我的<Datagrid />组件中添加一个人类友好的行号。我们如何做到这一点?我看到我们可以创建如下自定义组件:
https://marmelab.com/react-admin/Fields.html#writing-your-own-field-component
也许我们可以创建新的字段类型,如<RowNumber />,但当我看到上面的链接时,它似乎只有sourcerecord
如何在我的自定义字段中获取行的index编号?

9bfwbjaz

9bfwbjaz1#

我也有同样的问题,我找到了解决的方法。
首先,我创建了一个DataGridWithIndex组件,它与original DataGrid具有相同的签名

import React, { FC, useMemo } from 'react';
import { DatagridProps, useListContext, useRecordContext, Datagrid } from 'react-admin';

export const CurrentIndexField = (props: any) => {
  const record = useRecordContext(props);
  return record && record.__index__ !== undefined ? <span>{record.__index__} </span> : <span></span>;
};

export const DataGridWithIndex: FC<DatagridProps> = React.forwardRef((props, ref) => {
  const { children, ...rest } = props;
  const { data: rawData } = useListContext();
  const data = useMemo(() => rawData?.map((dt, index) => ({ ...dt, __index__: index + 1 /* make it 1-based */ })) || [], [rawData]);
  return (
    <Datagrid {...rest} ref={ref} data={data}>
      <CurrentIndexField />
      {children}
    </Datagrid>
  );
});

既然我们有了它,我们就可以用途:

...
    <List /* whatever params here */>
      <DataGridWithIndex /* whatever params here */>
          <TextField source="title" />
          ...
      </DataGridWithIndex>
    </List>

请注意,索引是每页的:如果你分页并且在第4页,第一行的索引为1(而不是41),这对我的要求来说是可以的。

相关问题