How to create a dynamically changing table using NextUI?

[sgoldcreatives]

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 (
            <div className="flex flex-col">
              <p className="text-bold text-sm capitalize">{cellValue}</p>
            </div>
          );
        case "dosage":
          return (
            <div className="flex flex-col">
              <p className="text-bold text-sm capitalize">
                {Number(cellValue) * Number(weight)} // should change dynamically, if I hardcode weight to 5 for example, dosage will stay cellValue * 5
              </p>
            </div>
          );
      }
    },
    [weight]
  );

return (
<Table aria-label="Example table with custom cells">
            <TableHeader columns={columns}>
              {(column) => (
                <TableColumn key={column.uid}>{column.name}</TableColumn>
              )}
            </TableHeader>
            <TableBody items={medications}>
              {(item) => (
                <TableRow key={item.id}>
                  {(columnKey) => (
                    <TableCell>{renderCell(item, columnKey)}</TableCell>
                  )}
                </TableRow>
              )}
            </TableBody>
          </Table>
)
}

[jimmyzzxhlh]

FWIW discussions are here: #2193

[xyba1337]

Took me a while to figure this out too, had to go for a weird solution but it now works.
The example of the website uses filtered items for the search functionality which in the example code looks something like this:

const [randomKey, setRandomKey] = useState(Math.random());

const refreshTable = () => {
   setRandomKey(Math.random())
}

const filteredItems = React.useMemo(() => {
    let filteredUnlockers: any[] = unlockerData;

    if (hasSearchFilter) {
      filteredUnlockers = filteredUnlockers.filter((unlocker) =>
        unlocker.title.toLowerCase().includes(filterValue.toLowerCase()),
      );
    }
   if (statusFilter !== "all" && Array.from(statusFilter).length !== statusOptions.length) {
      filteredUnlockers = filteredUnlockers.filter((unlocker) =>
        Array.from(statusFilter).includes(unlocker.status),
      );
    }

    return filteredUnlockers;
  }, [users, filterValue, statusFilter, randomKey]);

Notice that for the useMemo dependency array I added a useState variable "randomKey".
Now whenever I perform an action like deleting an item from the table I call refreshTable which causes the table to rerender.

Might be helpful for someone in the future

[archibold]

This is not working if you try to use refreshTable inside renderCell function or some other places inside Table that try to run refreshTable. Looks like code is already rendered with some values and even using hooks this one doesn't work.

import { useState } from 'react'

export function SomeComp() {
  const [randomKey, setRandomKey] = useState(Math.random())
  const refreshTable = () => setRandomKey(Math.random())
  
  const onChange = (item) => {
    //...
    // this wont work if you have some actions depend on changes in Table
    refreshTable()
  }

  const renderCell = useCallback(
    (item, columnKey) => {
      const cellValue = item[columnKey]
      switch (columnKey) {
        case 'name':
          return <Checkbox onValueChange={() => onChange(item)}></Checkbox>
        default:
          return cellValue as string
      }
    },
    [randomKey]
  )

  return (
    <Table>
     <TableHeader columns={{name:'name', uid: 'name'}}>
       {(column) => (
         <TableColumn key={column.uid}>{ column.name }</TableColumn>
        )}
     </TableHeader>
     <TableBody items={[{id: 1, name: 'ASD'}]} >
      {(item: any) => (
        <TableRow key={item.id}>
          {(columnKey) => (<TableCell>{renderCell(item, columnKey)}</TableCell>)}
        </TableRow>
       )}
      </TableBody>
    </Table>
 )
}

[archibold]

works if you add

<Table key={randomKey}>

[xyba1337]

This appears to be a function scope issue on your end. To resolve it, refactor the code by:

1. Defining the key generation function outside of the renderCell useCallback
2. Calling this function from within the useCallback

  const handleDeleteUnlocker = async (unlockerId: string) => {
    const deleteRequest = deleteUnlocker(unlockerId);

    toast.promise(deleteRequest, {
      loading: "Deleting unlocker...",
      success: "Unlocker deleted successfully!",
      error: "An error occurred while deleting the unlocker",
    });

    setUnlockerData((prevState) => {
      const updatedState = prevState.filter(
        (unlocker) => unlocker._id !== unlockerId,
      );
      return updatedState;
    });

    setRandomKey(Math.random());
  };

  const renderCell = React.useCallback(
    (user: any, columnKey: string) => {
      const cellValue = user[columnKey];

      switch (columnKey) {
       // ...
        case "actions":
          return (
            <div className="relative flex items-center justify-end gap-2">
              <Tooltip
                delay={0}
                closeDelay={0}
                content={"Edit unlocker"}
                placement="bottom"
              >
                <Button as={Link} href={`/dashboard/create?edit=${user.slug}`} isIconOnly variant="light">
                  <PenIcon size={16} />
                </Button>
              </Tooltip>
              <Tooltip
                delay={0}
                closeDelay={0}
                content={"View analytics"}
                placement="bottom"
              >
                <Button color="success" isIconOnly variant="light">
                  <ChartColumn size={16} />
                </Button>
              </Tooltip>
              <ConfirmDialog
                description="Are you sure you want to delete this unlocker? This action cannot be undone."
                onConfirm={() => { handleDeleteUnlocker(user._id) }} />
            </div>
          );
        default:
          return cellValue;
      }
    },
    [handleDeleteUnlocker],
  );