Search code examples
javascriptreactjsreact-data-grid

React Data Grid displaying frozen columns as last columns in the table

I am using the react-data-grid library and I am looking for a way to make the frozen columns(marked in red) appear in the right instead in the left(while still remain frozen). here is a snippet from their website demo:

function getColumns(countries: string[], direction: Direction): readonly Column<Row, SummaryRow>[] {
  return [
    SelectColumn,
    {
      key: 'id',
      name: 'ID',
      width: 60,
      frozen: true,
      resizable: false,
      summaryFormatter() {
        return <strong>Total</strong>;
      }
    },
    {
      key: 'title',
      name: 'Task',
      width: 120,
      frozen: true,
      editor: TextEditor,
      summaryFormatter({ row }) {
        return <>{row.totalCount} records</>;
      }
    },
    {
      key: 'client',
      name: 'Client',
      width: 220,
      editor: TextEditor
    },
    ...

it seems the frozen property pin the columns to the left and there is no option to pin them to the right. How can I achieve this?

enter image description here

Solution

  • because I needed this requirement I ended up forking the library to add this feature. I opened a PR for this feature and added an example in the common features demo: https://github.com/adazzle/react-data-grid/pull/2888/files