conscious-sapphire

Tables freezing once interacted with

Hi I’m having an issue with tanstack tables, being freezing of the whole React application/browser after having a row selected, attempts to sorted, writing in search bar for filtering or navigating pages. Any ideas? Thanks

15 Replies

fair-rose•2y ago

Did you check rerenders?

optimistic-gold•2y ago

same issue can someone help please wdym?

  {
    id: "select",
    header: ({ table }) => (
      <Checkbox
        checked={table.getIsAllPageRowsSelected()}
        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
        aria-label="Select all"
      />
    ),
    cell: ({ row }) => (
      <Checkbox
        checked={row.getIsSelected()}
        onCheckedChange={(value) => {
          //row.toggleSelected(!!value)
          console.log(row.getIsSelected());
          row.toggleSelected();
        }}
        aria-label="Select row"
      />
    ),
    enableSorting: false,
    enableHiding: false,
  },

  {
    id: "select",
    header: ({ table }) => (
      <Checkbox
        checked={table.getIsAllPageRowsSelected()}
        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
        aria-label="Select all"
      />
    ),
    cell: ({ row }) => (
      <Checkbox
        checked={row.getIsSelected()}
        onCheckedChange={(value) => {
          //row.toggleSelected(!!value)
          console.log(row.getIsSelected());
          row.toggleSelected();
        }}
        aria-label="Select row"
      />
    ),
    enableSorting: false,
    enableHiding: false,
  },

  const table = useReactTable({
    data: dataWithToken,
    columns: columns,
    onSortingChange: setSorting,
    onColumnFiltersChange: setColumnFilters,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    onColumnVisibilityChange: setColumnVisibility,
    onRowSelectionChange: setRowSelection,
    enableRowSelection: true,
    enableMultiRowSelection: true,
    state: {
      sorting,
      columnFilters,
      columnVisibility,
      rowSelection,
    },
  });

  const table = useReactTable({
    data: dataWithToken,
    columns: columns,
    onSortingChange: setSorting,
    onColumnFiltersChange: setColumnFilters,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    onColumnVisibilityChange: setColumnVisibility,
    onRowSelectionChange: setRowSelection,
    enableRowSelection: true,
    enableMultiRowSelection: true,
    state: {
      sorting,
      columnFilters,
      columnVisibility,
      rowSelection,
    },
  });

optimistic-gold•2y ago

https://ui.shadcn.com/docs/components/data-table#show-selected-rows

Data Table

Powerful table and datagrids built using TanStack Table.

optimistic-gold•2y ago

i followed this

optimistic-gold•2y ago

created an issue here too https://github.com/shadcn-ui/ui/issues/1960

GitHub

Data table row selection, totally breaks when selecting a row · Iss...

I followed the component example and it freezes the entire page once i click on one of the select icons. const table = useReactTable({ data: dataWithToken, columns: columns, onSortingChange: setSor...

flat-fuchsia•2y ago

I don't see where you data is defined, but this is almost certainly an infinite loop caused by not giving your data a stable reference

optimistic-gold•2y ago

by data is a state the table is inside a component where i send the state value which is the data but that states doesn't change what should i do? could it be caused by this map

 const dataWithToken: DataType[] = data.map((guild) => {
    return {
      guild,
      token,
      securityToken,
    };
  });

 const dataWithToken: DataType[] = data.map((guild) => {
    return {
      guild,
      token,
      securityToken,
    };
  });

rare-sapphire•2y ago

You need to memoize that

optimistic-gold•2y ago

how? i mean where ?

rare-sapphire•2y ago

useMemo , inline

optimistic-gold•2y ago

at the data with token or at columns?¿

rare-sapphire•2y ago

ask chatgpt how to memoize data with useMemo

optimistic-gold•2y ago

but i mean what imemonize the original data or the columns

rare-sapphire•2y ago

dataWithToken

optimistic-gold•2y ago

ty bro ❤️

Gaming

Programming

Tables freezing once interacted with

Did you find this page helpful?