Example for table sorting

[JoeVanGundy]

Having a really tough time getting sorting working.

I see that there is useColumnSort available in @glideapps/glide-data-grid-source.
But there doesn't seem to be any docs or examples of how to use it.

I'm using it like this to just try to get it to sort via the first column:

  const { getCellContent } = useColumnSort({
    columns: tableColumnsMap,
    getCellContent: getData,
    rows: rows,
    sort: {
      column: tableColumnsMap[1],
      direction: 'desc',
      mode: 'smart',
    },
  });

        <DataEditor
          getCellContent={getCellContent}
          columns={tableColumnsMap}
          rows={tableData.length}
          width="100%"
          height="100%"
          onColumnResize={onColumnResize}
          overscrollX={50}
          overscrollY={50}
          keybindings={{ search: true }}
        />

But in the call to getCellContent, my function only receives a column index and a row index of undefined for every cell?

Is this a bug, or am I doing something wrong?

Would it be possible to share the code for the homepage example?

[jassmith]

Hi Joe,

Just want you to know I did see this I just haven't had a chance to address it yet. I will try to open source the homepage example or at the very least post it here so you can see how it works. I believe it just uses the glide-data-grid-source package.

[stefroussos]

Have a look at https://github.com/glideapps/glide-data-grid/blob/main/packages/source/src/use-data-source.stories.tsx#L231

Assuming there aren't issues with the other props, something like this should work:

const sortArgs =  useColumnSort({
  columns: tableColumnsMap,
  getCellContent: getData,
  rows: tableData.length,
  sort: {
    column: tableColumnsMap[1],
    direction: 'desc',
    mode: 'smart',
  },
});

<DataEditor
  columns={tableColumnsMap}
  rows={tableData.length}
  {...sortArgs}
  width="100%"
  height="100%"
  onColumnResize={onColumnResize}
  overscrollX={50}
  overscrollY={50}
  keybindings={{ search: true }}
  getCellsForSelection={true} // Also missing this for search 
/>

[bruceharrison1984]

The source for this has moved:
https://github.com/quicktype/glide-data-grid/blob/main/packages/source/src/stories/use-data-source.stories.tsx