mirror of
https://git.sr.ht/~ashkeel/strimertul
synced 2024-09-18 01:50:50 +00:00
fix: add key function for data tables
This commit is contained in:
parent
4eac451432
commit
f83a6c6180
2 changed files with 5 additions and 1 deletions
|
@ -28,6 +28,7 @@ export interface DataTableProps<T> {
|
||||||
defaultSort: SortingOrder<T>;
|
defaultSort: SortingOrder<T>;
|
||||||
rowComponent: (data: { data: T }) => ReactElement;
|
rowComponent: (data: { data: T }) => ReactElement;
|
||||||
sort: (key: keyof T) => SortFunction<T>;
|
sort: (key: keyof T) => SortFunction<T>;
|
||||||
|
keyFunction: (data: T) => string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const Sortable = styled('div', {
|
const Sortable = styled('div', {
|
||||||
|
@ -46,6 +47,7 @@ export function DataTable<T>({
|
||||||
defaultSort,
|
defaultSort,
|
||||||
sort,
|
sort,
|
||||||
rowComponent,
|
rowComponent,
|
||||||
|
keyFunction,
|
||||||
}: DataTableProps<T>): React.ReactElement {
|
}: DataTableProps<T>): React.ReactElement {
|
||||||
const [entriesPerPage, setEntriesPerPage] = useState(15);
|
const [entriesPerPage, setEntriesPerPage] = useState(15);
|
||||||
const [page, setPage] = useState(0);
|
const [page, setPage] = useState(0);
|
||||||
|
@ -119,7 +121,7 @@ export function DataTable<T>({
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{paged.map((entry) => (
|
{paged.map((entry) => (
|
||||||
<RowComponent data={entry} />
|
<RowComponent key={keyFunction(entry)} data={entry} />
|
||||||
))}
|
))}
|
||||||
</tbody>
|
</tbody>
|
||||||
</Table>
|
</Table>
|
||||||
|
|
|
@ -104,6 +104,7 @@ function RewardQueue() {
|
||||||
<DataTable
|
<DataTable
|
||||||
sort={sortfn}
|
sort={sortfn}
|
||||||
data={data}
|
data={data}
|
||||||
|
keyFunction={(d) => `${d.when.toString()}/${d.username}`}
|
||||||
columns={[
|
columns={[
|
||||||
{
|
{
|
||||||
key: 'when',
|
key: 'when',
|
||||||
|
@ -350,6 +351,7 @@ function UserList() {
|
||||||
<DataTable
|
<DataTable
|
||||||
sort={sortfn}
|
sort={sortfn}
|
||||||
data={filtered}
|
data={filtered}
|
||||||
|
keyFunction={(entry) => entry.username}
|
||||||
columns={[
|
columns={[
|
||||||
{
|
{
|
||||||
key: 'username',
|
key: 'username',
|
||||||
|
|
Loading…
Reference in a new issue