How to create a dynamically changing table using NextUI?

[sgoldcreatives]

Discussed in https://github.com/nextui-org/nextui/discussions/2192

^{Originally posted by **sgoldcreatives** January 1, 2024} So I have no problem displaying the table using arrays and such. My problem is that I have a user input `weight` that I want to affect a table item `dosage` the problem is that I think that NextUI only renders the table once, therefore if `weight` changes after runtime, it does not affect `dosage`. ``` //..in data.ts export const columns = [ { uid: "name", name: "NAME", }, { uid: "dosage", name: "DOSAGE", }, { uid: "tags", name: "TAGS", }, { uid: "dosageForm", name: "DOSAGE FORM", }, ]; export type medForm = "Oral" | "Injectable"; export type medTags = | "For Dogs" | "For Cats" | "Sx" | "Tx" | "Pain" | "Antibiotic" | "Steroid"; export const medications: Med[] = [ { id: 1, dosage: 0.03, name: "Meloxicam", tags: ["For Dogs", "For Cats", "Pain", "Sx"], dosageForm: "Oral", }, ... etc //.. in page.tsx 'use client' //imports.. type User = (typeof medications)[0]; export default function Home() { const renderCell = React.useCallback( (user: User, columnKey: React.Key) => { const cellValue = user[columnKey as keyof User]; switch (columnKey) { case "name": return (

{cellValue}

); case "dosage": return (

{Number(cellValue) * Number(weight)} // should change dynamically, if I hardcode weight to 5 for example, dosage will stay cellValue * 5

); } }, [weight] ); return ( {(column) => ( {column.name} )} {(item) => ( {(columnKey) => ( {renderCell(item, columnKey)} )} )} ) } ```

[cdx111]

no way

[pkail]

Another (related) issue is that if the user sorts the table and then moves away from the page, when he goes back the table will be unsorted. It would be great if we could have a way to trigger sorting programmatically.

[edgeboy47]

For anyone that sees this, I had a similar issue and solved it by setting a key attribute on the Table component. Whenever that key changes, it causes the Table component to re-render

[rnithin133]

Hi @edgeboy47 , I tried that but not working. @edgeboy47 can show me some code!!

[agsafronenko]

For anyone that sees this, I had a similar issue and solved it by setting a key attribute on the Table component. Whenever that key changes, it causes the Table component to re-render

Thank you, worked for me!

[jimmyzzxhlh]

Changing the key as suggested by @edgeboy47 works, but this is pretty hacky.

My use case is to dynamically change some components in a table in Edit mode, i.e. if I want to edit a row inline in the table, then I can click on an edit button and then the cells of that row will become editable.