在使用React Table时,列标题通常是通过定义一个列数组来设置的,每个列对象包含一个Header
属性用于显示标题,以及一个可选的accessor
属性用于指定如何从数据中获取该列的值。accessor
是一个字符串或函数,它告诉React Table如何从每个数据行中提取相应的数据。
当你需要自定义表格列的标题,并且希望这些标题能够反映数据源中的字段或者进行一些数据处理时,你会使用到accessor
。
import React from 'react';
import { useTable } from 'react-table';
const data = React.useMemo(
() => [
{ name: 'Alice', age: 26 },
{ name: 'Bob', age: 33 },
],
[]
);
const columns = React.useMemo(
() => [
{
Header: 'Name',
accessor: 'name', // 字符串访问器
},
{
Header: 'Age',
accessor: d => d.age, // 函数访问器
},
],
[]
);
function Table({ columns, data }) {
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
} = useTable({ columns, data });
return (
<table {...getTableProps()}>
<thead>
{headerGroups.map(headerGroup => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (
<th {...column.getHeaderProps()}>{column.render('Header')}</th>
))}
</4>
))}
</thead>
<tbody {...getTableBodyProps()}>
{rows.map(row => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map(cell => {
return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>;
})}
</tr>
);
})}
</tbody>
</table>
);
}
export default function App() {
return <Table columns={columns} data={data} />;
}
如果你想要检索React Table中的访问器名称,你可以遍历columns
数组并获取每个列对象的accessor
属性。例如:
columns.forEach(column => {
console.log(column.accessor);
});
这将打印出每个列的访问器名称。
通过这种方式,你可以轻松地管理和检索React Table中的列标题和访问器名称。
领取专属 10元无门槛券
手把手带您无忧上云