Nul*_*ull 7 typescript reactjs react-table react-table-v8
我们正在将表从 v7 迁移到 v8。我对单元格条件样式有点疑问。所以基本上我想做的是，根据状态（即将进入表数据），我需要向行中的每个单元格添加特定的类名。
在 v7 中我们使用了这个： https: //react-table-v7.tanstack.com/docs/examples/data-driven-classes-and-styles
但在 v8 中我找不到类似的东西......
到目前为止，我尝试meta在列定义中使用https://tanstack.com/table/v8/docs/api/core/column-def#meta，我可以在其中为 className 属性设置一些值，并在我的 JSX 中使用它，如下所示：
className={cell.column.columnDef.meta?.className}
但问题是我可以设置为元的任何内容都是静态值。对于我的情况，我需要根据我的状态值设置特定的 className。似乎在元中我们无法访问任何单元格道具......
const driverFormatter = ({ row }) => {
const { status } = row.original;
return <span>{status}</span>;
};
const columns: ColumnDef<any,any>[] = [
{
accessorKey: "customerName",
header: "Customer"
},
{
accessorKey: "driver",
header: "Driver",
enableSorting: false,
cell: driverFormatter,
meta: {
className: "disabled",
},
},
...
那么有什么方法可以使用 v8 来实现这一点吗？
谢谢你！
小智 6
第一种方法 - 通过列定义元键：
我们可以通过meta获取V8中每个cell的详细上下文，比如
{
accessorKey: 'section',
cell: (info) => info.getValue(),
footer: (props) => props.column.id,
meta: {
getCellContext: (context: CellContext<Person, unknown>) => {
if (context.row.index === 0) {
// console.log(context)
return {
style: { fontWeight: 'bold', minWidth: '30%', textTransform: 'uppercase' },
className: 'bold',
}
}
},
},
},
为了获得这样的动态上下文，我们需要向ColumnMeta添加额外的属性。
declare module '@tanstack/react-table' {
interface ColumnMeta<TData, TValue> {
// Your additional properties here
getCellContext: (context: CellContext<TData, TValue>) => TableCellProps | void
}
}
然后我们可以在循环中使用这个函数
<TableBody>
{table
.getRowModel()
.rows.slice(0, 20)
.map((row) => {
return (
<TableRow key={row.id} {...getRowProps(row)}>
{(isSplit ? row.getCenterVisibleCells() : row.getVisibleCells()).map((cell) => {
let hasMeta = cell.getContext().cell.column.columnDef.meta
return (
<TableCell
key={cell.id}
{...(hasMeta && { ...hasMeta.getCellContext(cell.getContext()) })}
>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</TableCell>
)
})}
</TableRow>
)
})}
</TableBody>
通过此，您可以根据值向每个 *** TABLE CELL *** 添加样式、className等。
但是你不能用上面的方法来设置TABLE ROW的样式。为了那个原因
第二种方法 - 通过回调函数：
为行和单元格定义两个函数
// Func to provide props to table row
const getRowProps = (context: Row<Person>): TableRowProps | void => {
console.log(context)
if (context.original.section.includes('section')) {
return { className: 'sectionHeader', sx: (theme) => ({ background: theme.palette.primary.light }) }
}
}
// Func to provide props to table cell
const getCellProps = (context: CellContext<Person, unknown>): TableCellProps | void => {
if (context.row.index === 0) {
// console.log(context)
return {
style: { fontWeight: 'bold', minWidth: '30%', textTransform: 'uppercase' },
className: 'bold',
}
}
}
只是解构函数
<TableBody>
{table
.getRowModel()
.rows.slice(0, 20)
.map((row) => {
return (
<TableRow key={row.id} {...getRowProps(row)}> //<- here
{row.getLeftVisibleCells().map((cell) => {
return (
<TableCell
key={cell.id}
{...getCellProps(cell.getContext())} // <-here
>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</TableCell>
)
})}
</TableRow>
)
})}
</TableBody>