hook.js:608 Warning: Prop `data-key` did not match. Server: "row-header-column-rf00khjune" Client: "
Unanswered
treconyl posted this in #help-forum
treconylOP
I'm using nextui's table and have this error when adding selectionMode="multiple" to the table, how can I fix it?
<Table
aria-label="Mypackage Table"
sortDescriptor={sortDescriptor}
onSortChange={(descriptor) => setSortDescriptor(descriptor)}
topContent={topContent}
bottomContent={bottomContent}
selectionMode="multiple"
selectedKeys={checkbox}
onSelectionChange={setCheckbox}
>
<TableHeader>
{columns.map((col) => (
<TableColumn key={col.key} allowSorting={col.allowsSorting}>
{col.label}
</TableColumn>
))}
</TableHeader>
<TableBody items={sortedItems} loadingContent={<Spinner />} loadingState={isLoading ? "đang tải" : "nhàn rỗi"}>
{(mục) => (
<TableRow key={item.id}>
{(columnKey) => <TableCell>{renderCell(mục, columnKey)}</TableCell>}
</TableRow>
)}
</TableBody>
</Table>
<Table
aria-label="Mypackage Table"
sortDescriptor={sortDescriptor}
onSortChange={(descriptor) => setSortDescriptor(descriptor)}
topContent={topContent}
bottomContent={bottomContent}
selectionMode="multiple"
selectedKeys={checkbox}
onSelectionChange={setCheckbox}
>
<TableHeader>
{columns.map((col) => (
<TableColumn key={col.key} allowSorting={col.allowsSorting}>
{col.label}
</TableColumn>
))}
</TableHeader>
<TableBody items={sortedItems} loadingContent={<Spinner />} loadingState={isLoading ? "đang tải" : "nhàn rỗi"}>
{(mục) => (
<TableRow key={item.id}>
{(columnKey) => <TableCell>{renderCell(mục, columnKey)}</TableCell>}
</TableRow>
)}
</TableBody>
</Table>
1 Reply
treconylOP
by default it is taking my ID into the checkcbox array is there any way to change it to take api_key instead of ID? i don't see it in the nextxui documentation. one more thing is when i click select all the value of state checkbox is all not the items i selected ?
below is my column const columns
const columns = [
{ key: "id", label: "id", allowsSorting: true },
{ key: "api_key", label: "api_key", allowsSorting: true },
{ key: "http", label: "http", allowsSorting: true },
{ key: "socks5", label: "socks5", allowsSorting: true },
{ key: "location", label: "location" },
{ key: "ip", label: "ip" },
{ key: "remaining_time", label: "remaining_time", allowsSorting: true },
{ key: "created_at", label: "created_at", allowsSorting: true },
{ key: "action", label: "action" }
];
below is my column const columns
const columns = [
{ key: "id", label: "id", allowsSorting: true },
{ key: "api_key", label: "api_key", allowsSorting: true },
{ key: "http", label: "http", allowsSorting: true },
{ key: "socks5", label: "socks5", allowsSorting: true },
{ key: "location", label: "location" },
{ key: "ip", label: "ip" },
{ key: "remaining_time", label: "remaining_time", allowsSorting: true },
{ key: "created_at", label: "created_at", allowsSorting: true },
{ key: "action", label: "action" }
];