我的id主键字段类型是UUID,我想在我的<Datagrid />组件中添加一个人类友好的行号。我们如何做到这一点?我看到我们可以创建如下自定义组件:https://marmelab.com/react-admin/Fields.html#writing-your-own-field-component也许我们可以创建新的字段类型,如<RowNumber />,但当我看到上面的链接时,它似乎只有source和record。如何在我的自定义字段中获取行的index编号?
<Datagrid />
<RowNumber />
source
record
index
9bfwbjaz1#
我也有同样的问题,我找到了解决的方法。首先,我创建了一个DataGridWithIndex组件,它与original DataGrid具有相同的签名
DataGridWithIndex
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),这对我的要求来说是可以的。
1条答案
按热度按时间9bfwbjaz1#
我也有同样的问题,我找到了解决的方法。
首先,我创建了一个
DataGridWithIndex
组件,它与original DataGrid具有相同的签名既然我们有了它,我们就可以用途:
请注意,索引是每页的:如果你分页并且在第4页,第一行的索引为1(而不是41),这对我的要求来说是可以的。