Я использую плагин react-table, и мне трудно заставить сортировку работать для одного столбца, для которого определена настраиваемая ссылка.
Содержимое этого столбца основано на некоторых свойствах из данных в этой строке поэтому я создал для него собственную ячейку. Он отображается нормально, но сортировка выполняется очень странно.
Я почти уверен, что проблема в определении columns, но для полноты я опубликую здесь весь код:
export default function CloudfrontList() {
const [loading, setLoading] = useState(true);
const [columns, setColumns] = useState([]);
const [data, setData] = useState([]);
const getDataForTable = async () => {
const _columns = [{
// This is the cell that doesn't sort properly
Header: "Name",
Cell: cell => {
const row = cell.row.original;
const value = row.comment ? row.comment : row.origins[0].domain_name;
return (
<Link href="/view/cloudfront/[id]" as={`/view/cloudfront/${row.id}`}>
<a>{value}</a>
</Link>
);
},
accessor: row => {
return row.comment ? row.comment : row.origins[0].domain_name;
},
id: Math.random() // It needs a unique ID, right?
}, {
Header: "Identifier",
accessor: "id"
}, {
Header: "Product",
accessor: "tags.Product"
}];
const _assets = await readAllAssetsOfType(AssetType.Cloudfront);
setColumns(_columns);
setData(_assets);
setLoading(false);
};
useEffect(() => {
getDataForTable();
}, []);
return (
<>
<Head>
<title>Cloudfront List :: {siteTitle}</title>
</Head>
{loading ? (
"loading..."
) : (
<Card>
<CardHeader>
All Cloudfront Assets
<Badge color="secondary" className="ml-2">{data.length}</Badge>
</CardHeader>
<CardBody>
<Table columns={columns} data={data} />
</CardBody>
</Card>
)}
</>
);
}
function Table({ columns, data }) {
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
} = useTable(
{
columns,
data
},
useSortBy
);
return (
<>
<table {...getTableProps()} className="table table-sm table-hover">
<thead>
{headerGroups.map(headerGroup => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (
<th {...column.getHeaderProps(column.getSortByToggleProps())}>
{column.render("Header")}
<span>
{column.isSorted
? column.isSortedDesc
? <FontAwesomeIcon icon={faSortDown} style={{ color: "#969696", width: "0.5rem" }} />
: <FontAwesomeIcon icon={faSortUp} style={{ color: "#969696", width: "0.5rem" }} />
: (
<FontAwesomeIcon icon={faSort} style={{ color: "#969696", width: "0.5rem" }} />
)}
</span>
</th>
))}
</tr>
))}
</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>
</>
);
}
Вот пример того, что происходит, когда я щелкаю заголовок Name; он сортирует, но, кажется, делит строки на две группы:
введите описание изображения здесь
Я подумал, что, возможно, проблема связана с определением ссылки - возможно, она сортирует тег - но когда я изменил его на:
Cell: cell => {
const row = cell.row.original;
const value = row.comment ? row.comment : row.origins[0].domain_name;
return (
value
);
},
... проблема не устранена . Может кто-нибудь указать, где я ошибаюсь?