T
TanStack•3mo ago
harsh-harlequin

table hook re-use across routes

follow up from: https://discord.com/channels/719702312431386674/1003326939899113492/1380046393439293530 cc @KevinVandy could you explain more what you mean about re-using hooks? i have a page component that queries some data and passes it down to a table component that instantiates and renders the table i don't really feel like i'm 'reusing' the hook in the sense that i'm not defining it and calling it multiple places 
// page (i can paste the actual code if needed)
export function GroupsRoute() {
    ...
    return (
        <DataTable
          query={term.value}
          expand={sheet.open}
          data={group.expenses as ExpenseWithParticipants[]}
        />
    )
}

// table
export function DataTable(props: DataTableProps) {
  const table = useReactTable({
    data: props.data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getRowId: (row) => row.id,
    meta: { expand: props.expand, updateTitle: props.updateTitle },
    getSortedRowModel: getSortedRowModel(),
    initialState: { sorting: [{ id: "date", desc: true }] },
  });

  const rowRefs = useRef<HTMLTableRowElement[]>([]);
  ...
  return ( ... )
}
// page (i can paste the actual code if needed)
export function GroupsRoute() {
    ...
    return (
        <DataTable
          query={term.value}
          expand={sheet.open}
          data={group.expenses as ExpenseWithParticipants[]}
        />
    )
}

// table
export function DataTable(props: DataTableProps) {
  const table = useReactTable({
    data: props.data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getRowId: (row) => row.id,
    meta: { expand: props.expand, updateTitle: props.updateTitle },
    getSortedRowModel: getSortedRowModel(),
    initialState: { sorting: [{ id: "date", desc: true }] },
  });

  const rowRefs = useRef<HTMLTableRowElement[]>([]);
  ...
  return ( ... )
}
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?