Header Renderers

const columns: ColumnDef[] = [
  { field: 'name', header: 'Name', width: 220 },
  { field: 'email', header: 'Email', width: 260 },
];

const columns: ColumnDef[] = [
  {
    field: 'email',
    header: {
      text: 'Email',
      type: 'text',
      tooltip: { content: 'Primary contact email' },
      trailingIcon: { content: '@', position: 'trailing' },
    },
    width: 260,
  },
  {
    field: 'status',
    header: {
      text: 'Status',
      type: 'filterable',
      filterIndicator: { show: true, dropdownType: 'select' },
    },
    filterable: true,
    width: 140,
  },
];

const columns: ColumnDef[] = [
  {
    field: 'price',
    header: {
      text: 'Price',
      type: 'sortable',
      sortIndicator: { show: true, ascIcon: '↑', descIcon: '↓' },
    },
    sortable: true,
    width: 120,
  },
];

grid.on('header:click', ({ columnIndex, column }) => {
  console.log(columnIndex, column.field);
});

grid.on('header:sort:click', ({ columnIndex, nextDirection }) => {
  console.log(columnIndex, nextDirection);
});

grid.on('header:filter:click', ({ columnIndex, hasActiveFilter }) => {
  console.log(columnIndex, hasActiveFilter);
});