admin管理员组文章数量:1353646
I am using the react-table plugin and am having difficulty getting the sorting to work for one column that has a custom link defined.
This column's content is based on some properties from the data in that row so I have created a custom Cell for it. It displays OK, but the sorting performs very strangely.
I am pretty sure the issue is in the columns definition but I will post all the code here for pleteness:
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 = rowment ? rowment : row.origins[0].domain_name;
return (
<Link href="/view/cloudfront/[id]" as={`/view/cloudfront/${row.id}`}>
<a>{value}</a>
</Link>
);
},
accessor: row => {
return rowment ? rowment : 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>
</>
);
}
Here's an example of what happens when I click the Name header; it does sort but it seems to divide the rows into two groups:
I thought maybe the issue was the link definition - that it may have been sorting the tag - but when I change it to:
Cell: cell => {
const row = cell.row.original;
const value = rowment ? rowment : row.origins[0].domain_name;
return (
value
);
},
...the issue persists. Can someone point out where I am going wrong?
I am using the react-table plugin and am having difficulty getting the sorting to work for one column that has a custom link defined.
This column's content is based on some properties from the data in that row so I have created a custom Cell for it. It displays OK, but the sorting performs very strangely.
I am pretty sure the issue is in the columns definition but I will post all the code here for pleteness:
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.ment ? row.ment : row.origins[0].domain_name;
return (
<Link href="/view/cloudfront/[id]" as={`/view/cloudfront/${row.id}`}>
<a>{value}</a>
</Link>
);
},
accessor: row => {
return row.ment ? row.ment : 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>
</>
);
}
Here's an example of what happens when I click the Name header; it does sort but it seems to divide the rows into two groups:
I thought maybe the issue was the link definition - that it may have been sorting the tag - but when I change it to:
Cell: cell => {
const row = cell.row.original;
const value = row.ment ? row.ment : row.origins[0].domain_name;
return (
value
);
},
...the issue persists. Can someone point out where I am going wrong?
Share Improve this question asked Aug 3, 2020 at 10:18 MSOACCMSOACC 3,6852 gold badges34 silver badges51 bronze badges 2-
You might need to define the sort method by yourself using
sortMethod. Like in this example: codesandbox.io/s/l776y47n9?file=/index.js – Mosh Feu Commented Aug 3, 2020 at 13:08 -
btw, the "unique id" is for each column, you can just have something like
id: "name", no need to generate unique strings. – Szaman Commented Jun 11, 2021 at 15:36
2 Answers
Reset to default 3It worked for me leaving the accessor property in the column empty:
const columns: Column[] = [
{
Header: 'Name',
Cell: (data: Cell) => {
const original: any = data.row.original;
return 'Something';
},
accessor: '',
}
]
This appears fine to me, if you see in snapshot, first sorted set has upppercase first letter and second set has lowercase letters, means the default sorting seems to case-sensitive.
You will be required to use custom sorting or any other sorting method(if available) to do case insensitive sorting.
本文标签： javascriptreacttable sorting not working for column with custom cellStack Overflow
版权声明：本文标题：javascript - react-table sorting not working for column with custom cell - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743924147a2562645.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论