T
TanStack•2y ago
optimistic-gold

Unsure why sorting is not working

Hello, as the title is saying, I'm not sure why is sorting not working in my table implementation. Here are the definitions 
 const columnHelper = createColumnHelper<Visa>();
  const columns = [
    columnHelper.accessor('email', {
      cell: (info) => info.getValue(),
      header: () => <span>Visa ID</span>,
    }),
    columnHelper.accessor(
      (row) => {
        const username = row.credentials ? row.credentials[0].username : '';
        return username;
      },
      {
        cell: (info) => info.getValue(),
        id: 'username',
        header: () => <span>Username</span>,
      },
    ),
    columnHelper.accessor(
      (row) => {
        const hostname = row.credentials ? row.credentials[0].hostnames[0] : '';
        return hostname;
      },
      {
        cell: (info) => info.getValue(),
        id: 'hostname',
        header: () => <span>Hostname</span>,
      },
    ),
    columnHelper.accessor('known_set_size', {
      cell: (info) => info.getValue(),
      header: () => <span>Known set</span>,
    }),
  ];
 const columnHelper = createColumnHelper<Visa>();
  const columns = [
    columnHelper.accessor('email', {
      cell: (info) => info.getValue(),
      header: () => <span>Visa ID</span>,
    }),
    columnHelper.accessor(
      (row) => {
        const username = row.credentials ? row.credentials[0].username : '';
        return username;
      },
      {
        cell: (info) => info.getValue(),
        id: 'username',
        header: () => <span>Username</span>,
      },
    ),
    columnHelper.accessor(
      (row) => {
        const hostname = row.credentials ? row.credentials[0].hostnames[0] : '';
        return hostname;
      },
      {
        cell: (info) => info.getValue(),
        id: 'hostname',
        header: () => <span>Hostname</span>,
      },
    ),
    columnHelper.accessor('known_set_size', {
      cell: (info) => info.getValue(),
      header: () => <span>Known set</span>,
    }),
  ];
I assume the problem lays somewhere in this code? I do have sorting state set up along with a handler (getToggleSortingHandler) in table headers. There are no error messages it's just the sorting simply doesn't happen. I'm trying to respect the guidelines with this code snippet, if it's too large please let me know.
1 Reply
optimistic-gold
optimistic-goldOP•2y ago
It seems that I managed to find a solution. I'll leave it here for reference if anyone else runs into this issue. Here's the line that I changed 
 <button onClick={() => header.column.getToggleSortingHandler()}>
 <button onClick={() => header.column.getToggleSortingHandler()}>
was changed into 
 <button onClick={header.column.getToggleSortingHandler()}>
 <button onClick={header.column.getToggleSortingHandler()}>

Did you find this page helpful?