Recommended approach to reordering columns in a table

[bri-fox]

What is the recommended approach to reordering columns in a table?

I have tried to use a popover with a grid list to reorder the column data, which on drag drop updates the column data that is used by the table header. This correctly updates the table header, but does not update the table body.

export const Example = (args: any) => {
  let columns = useListData({
    initialItems: [
      { name: "Name", id: "name", isRowHeader: true },
      { name: "Type", id: "type" },
      { name: "Date Modified", id: "date" },
    ],
  });

  let rows = useListData({
    initialItems: [
      { id: 1, name: "Games", date: "6/7/2020", type: "File folder" },
      { id: 2, name: "Program Files", date: "4/7/2021", type: "File folder" },
      { id: 3, name: "bootmgr", date: "11/20/2010", type: "System file" },
      { id: 4, name: "log.txt", date: "1/18/2016", type: "Text Document" },
      {id: 5,name: "Proposal.ppt", date: "6/18/2022",  type: "PowerPoint file"},
      { id: 6, name: "Taxes.pdf", date: "12/6/2023", type: "PDF Document" },
      { id: 7, name: "Photos", date: "8/2/2021", type: "File folder" },
      { id: 8, name: "Documents", date: "3/18/2023", type: "File folder" },
      { id: 9, name: "Budget.xls", date: "1/6/2024", type: "Excel file" },
    ],
  });

  let { dragAndDropHooks } = useDragAndDrop({
    getItems: (keys) =>
      [...keys].map((key) => ({ "text/plain": columns.getItem(key).id })),
    onReorder(e) {
      if (e.target.dropPosition === "before") {
        columns.moveBefore(e.target.key, e.keys);
      } else if (e.target.dropPosition === "after") {
        columns.moveAfter(e.target.key, e.keys);
      }
    },
  });



  return (
    <div>
      <DialogTrigger>
        <Button className={"mb-2"}>Reorder</Button>
        <Popover {...args} className="max-w-[250px]">
          <GridList
            aria-label="Reorderable list"
            items={columns.items}
            dragAndDropHooks={dragAndDropHooks}
          >
            {(item) => <GridListItem>{item.name}</GridListItem>}
          </GridList>
        </Popover>
      </DialogTrigger>
      <Table aria-label="Files" {...args}>
        <TableHeader columns={columns.items}>
          {(column) => (
            <Column isRowHeader={column.isRowHeader}>{column.name}</Column>
          )}
        </TableHeader>
        <TableBody items={rows.items}>
          {(row) => (
            <Row>
              <Cell>{row.name}</Cell>
              <Cell>{row.type}</Cell>
              <Cell>{row.date}</Cell>
            </Row>
          )}
        </TableBody>
      </Table>
    </div>
  );
};

What are other peoples approach?

[bri-fox]

for anyone who needs the answer:

The fix is to include dependencies={columns.items} on your TableBody.
Also columns={columns.items} on your Row.

export const Example = (args: any) => {
  console.log("render");
  let columns = useListData({
    initialItems: [
      { name: "Name", id: "name", isRowHeader: true },
      { name: "Type", id: "type" },
      { name: "Date Modified", id: "date" },
    ],
  });

  let rows = useListData({
    initialItems: [
      { id: 1, name: "Games", date: "6/7/2020", type: "File folder" },
      { id: 2, name: "Program Files", date: "4/7/2021", type: "File folder" },
      { id: 3, name: "bootmgr", date: "11/20/2010", type: "System file" },
      { id: 4, name: "log.txt", date: "1/18/2016", type: "Text Document" },
      {
        id: 5,
        name: "Proposal.ppt",
        date: "6/18/2022",
        type: "PowerPoint file",
      },
      { id: 6, name: "Taxes.pdf", date: "12/6/2023", type: "PDF Document" },
      { id: 7, name: "Photos", date: "8/2/2021", type: "File folder" },
      { id: 8, name: "Documents", date: "3/18/2023", type: "File folder" },
      { id: 9, name: "Budget.xls", date: "1/6/2024", type: "Excel file" },
    ],
  });

  let { dragAndDropHooks } = useDragAndDrop({
    renderDropIndicator(target) {
      return (
        <DropIndicator
          target={target}
          className={({ isDropTarget }) =>
            `${isDropTarget ? "outline outline-1 outline-blue-500" : ""}`
          }
        />
      );
    },
    getItems: (keys) =>
      [...keys].map((key) => ({ "text/plain": columns.getItem(key).id })),
    onReorder(e) {
      if (e.target.dropPosition === "before") {
        columns.moveBefore(e.target.key, e.keys);
      } else if (e.target.dropPosition === "after") {
        columns.moveAfter(e.target.key, e.keys);
      }
    },
  });

  return (
    <div>
      <DialogTrigger>
        <Button className={"mb-2"}>Reorder</Button>
        <Popover {...args} className="max-w-[450px]">
          <GridList
            aria-label="Reorderable list"
            items={columns.items}
            dragAndDropHooks={dragAndDropHooks}
          >
            {(item) => <GridListItem>{item.name}</GridListItem>}
          </GridList>
        </Popover>
      </DialogTrigger>
      <Table aria-label="Files" {...args}>
        <TableHeader columns={columns.items}>
          {(column) => (
            <Column isRowHeader={column.isRowHeader}>{column.name}</Column>
          )}
        </TableHeader>
        <TableBody items={rows.items} dependencies={columns.items}>
          {(item) => (
            <Row columns={columns.items}>
              {(column) => <Cell>{item[column.id]}</Cell>}
            </Row>
          )}
        </TableBody>
      </Table>
    </div>
  );
};