Columns

const columns: ColumnDef[] = [
  { field: 'id', header: 'ID', width: 80, minWidth: 60, sortable: true },
  { field: 'name', header: 'Name', width: 220, resizable: true, reorderable: true },
  { field: 'status', header: 'Status', width: 140, filterable: true },
];

grid.columns.resize(1, 260);
grid.columns.autoFit(1);
grid.columns.autoFitAll();
grid.columns.setConstraints(1, { minWidth: 160, maxWidth: 360 });

const state = grid.columns.getState();
localStorage.setItem('columns', JSON.stringify(state));

const saved = localStorage.getItem('columns');
if (saved) {
  grid.columns.applyState(JSON.parse(saved), {
    applyWidth: true,
    applyOrder: true,
    applyVisibility: true,
  });
}

grid.on('column:resize', ({ column, oldWidth, newWidth }) => {
  console.log({ column, oldWidth, newWidth });
});

grid.on('column:move', ({ column, oldIndex, newIndex }) => {
  console.log({ column, oldIndex, newIndex });
});

grid.on('column:dragStart', ({ columnId, columnIndex }) => {
  console.log({ columnId, columnIndex });
});

grid.on('column:dragEnd', ({ columnId, fromIndex, toIndex }) => {
  console.log({ columnId, fromIndex, toIndex });
});