Estoy usando ag-grid para tener el panel de herramientas en la barra lateral que tiene casillas de verificación de columnas. Tengo problemas para clasificar las columnas sin marcar en orden alfabético.
Estoy usando la siguiente función para ordenar las columnas por orden marcado y no marcado, pero no puedo lograr la clasificación alfabética en las columnas marcadas y no marcadas.
const sortColumns = (columnDefs: gridColDef[]): void => { columnDefs.sort((cd1,cd2) => +cd1.hide - +cd2.hide); }; sortColumns(gridColumns);Suponiendo que su matriz contiene objetos (porque leyó el valor .hide en ellos), ¿se refiere a la variable correcta al ordenar? ¿Está el nombre en el objeto debajo de .hide?:
const sortColumns = (columnDefs: gridColDef[]): void => { columnDefs.sort((cd1,cd2) => cd1.name - cd2.name); //Sort by name field }; sortColumns(gridColumns);pero parecería más simple simplemente llamarlo en la matriz que desea directamente:
gridColumns.sort((cd1,cd2) => cd1.name - cd2.name);Puede ordenarlo luego por marcado o no después para agrupar marcado y desmarcado juntos:
gridColumns.sort((cd1,cd2) => cd1.hide - cd2.hide);También sería útil ver la estructura de los datos que está tratando de ordenar.
Opción 1
Si desea ordenar las columnas solo en la barra lateral , use el controlador onGridReady() y el argumento api para aplicar un diseño de columna personalizado :
<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 />opcion 2
Si desea ordenar las columnas en la tabla y la barra lateral, es un poco más simple, primero ordene las definiciones de columna, luego páselas al componente:
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 /> );--EDITAR--
Opción 3 Si desea mostrar las columnas en la barra lateral así:
La solución es un poco más compleja, use el controlador onColumnVisible() y su argumento columnApi para acceder a una lista de las columnas. Separe lo visible de lo oculto usando la clave visible y ordénelo según corresponda.
<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 />