How to sort the checked and unchecked columns in alphabetical order in ag grid sidebar panel

Question

I am using ag-grid to have the tool panel on the sidebar which has column checkboxes.I am having issue with sorting the unchecked columns in the alphabetical order.

I am trying to achieve some sort of functionality like shown the ag grid example.

I am using the below function to sort the columns by checked and unchecked order but not able to achieve alphabetical sorting on checked and unchecked columns.

const sortColumns = (columnDefs: gridColDef[]): void => {
columnDefs.sort((cd1,cd2) => +cd1.hide - +cd2.hide);
};

sortColumns(gridColumns);

Answer 1

Assuming that your array contains object (because you read the .hide value on them), are you referring to the correct variable when sorting? Is the name on the object under .hide?:

const sortColumns = (columnDefs: gridColDef[]): void => { 
  columnDefs.sort((cd1,cd2) => cd1.name - cd2.name); //Sort by name field
};

sortColumns(gridColumns);

but it would seem simpler to just call it on the array you want directly:

gridColumns.sort((cd1,cd2) => cd1.name - cd2.name);

You can sort it then by checked or not afterwards to group checked and un-checked together:

gridColumns.sort((cd1,cd2) => cd1.hide - cd2.hide);

It would be helpful to see the structure of the data your are trying to sort too.

Answer 2

Option 1

If you want to sort the columns in the sidebar only, use the handler onGridReady() and the api argument to apply a Custom Column Layout:

<AgGridReact
  onGridReady={({api}) => {
    const columnsToolPanel = api.getToolPanelInstance("columns");
    const sortedColumnDefs = [...columnDefs].sort((cd1, cd2) => {
      if (cd1.field < cd2.field) return -1;
      if (cd1.field > cd2.field) return 1;
      return 0;
    });
    // set custom Columns Tool Panel layout
    columnsToolPanel.setColumnLayout(sortedColumnDefs);
  }}
  //...other props
/>

Option 2

If you want to sort the columns in the table and the sidebar - it's a bit simpler - sort the column defs first, then pass it into the component:

const sortedColumnDefs = [...columnDefs].sort((cd1, cd2) => {
  if (cd1.field < cd2.field) return -1;
  if (cd1.field > cd2.field) return 1;
  return 0;
});

return (
  <AgGridReact
    columnDefs={sortedColumnDefs}
    //  ...other props
  />
);

--EDIT--

Option 3 If you want to display the columns in the sidebar like so:

• Visible columns in default order
• Hidden columns in alphabetical order

Solution is a bit more complex, use the onColumnVisible() handler and its columnApi argument to access a list of the columns. Separate visible from hidden using key visible, and sort accordingly.

<AgGridReact
    onColumnVisible={({ api, columnApi }) => {
        const columnsToolPanel = api.getToolPanelInstance("columns");
        const columns = columnApi.getAllColumns();
        const visibleColumns = columns.filter(
        ({ visible }) => visible === true
        );
        const hiddenColumns = columns.filter(
        ({ visible }) => visible === false
        );
        const sortedHiddenColumns = [...hiddenColumns].sort(
        (cd1, cd2) => {
            if (cd1.colDef.field < cd2.colDef.field) return -1;
            if (cd1.colDef.field > cd2.colDef.field) return 1;
            return 0;
        }
        );
        const newColumns = [...visibleColumns, ...sortedHiddenColumns];
        const newColDefs = newColumns.map(({ colDef }) => colDef);
        columnsToolPanel.setColumnLayout(newColDefs);
    }}
   // ...other props
/>

Live Demo