Columns

BlazeTable’s column system is designed for flexibility, allowing you to define, configure, and enhance table columns effortlessly. This guide covers everything you need to know about working with columns in BlazeTable’s Basic (Core) package.

🧱 Defining Columns

Each column is defined by an object in the columns array. At minimum, a column requires a header and an accessorKey:

const columns = [
  { header: "ID", accessorKey: "id" },
  { header: "Name", accessorKey: "name" },
  { header: "Role", accessorKey: "role" },
];

These keys are used for rendering headers and mapping data from your dataset.

🔎 Column Filtering

BlazeTable supports client-side filtering out of the box. To enable filtering on a column, you can define a filterFn or rely on the built-in filter functions provided by BlazeTable.

const columns = [
  { header: "Name", accessorKey: "name", enableColumnFilter: true },
  { header: "Role", accessorKey: "role", enableColumnFilter: true },
];

In your UI, use the TableFilter component to render the filter input for a specific column.

<TableFilter column={column} />

⚙️ Column Configuration

Columns can also be configured for advanced behaviors:

Example:

const columns = [
  {
    header: "ID",
    accessorKey: "id",
    enableSorting: true,
    size: 80,
  },
  {
    header: "Email",
    accessorKey: "email",
    enableColumnFilter: true,
  },
];

🔁 Sorting

Sorting is enabled by default. You can disable it per column using:

{
  header: 'Date Created',
  accessorKey: 'createdAt',
  enableSorting: false
}

Clicking a table header toggles sort direction automatically when sorting is enabled.

↔️ Resizing

To enable manual resizing, simply pass the enableResizing property:

{
  header: 'Notes',
  accessorKey: 'notes',
  enableResizing: true
}

This allows users to click and drag the column edge to resize.

🎯 Custom Cell Rendering

You can fully customize how a cell is rendered using the cell property:

{
  header: 'Status',
  accessorKey: 'status',
  cell: ({ row }) => <Badge>{row.original.status}</Badge>
}

This is useful for rendering UI components, badges, icons, or formatted text.

✅ Next Up: Head over to Rows to explore row-level features like selection, actions, and expansion!