Active Grid

Column Defaults - Active Grid

Overview

Column defaults provide a way to set default values for all columns in your grid. These settings are applied to every column unless explicitly overridden in individual column definitions.

interface GridColumnDefaults<TData = any, TValue = any> {
  size?: number;
  minSize?: number;
  maxSize?: number;
  enableSorting?: boolean;
  enableResizing?: boolean;
  enablePinning?: boolean;
  enableHiding?: boolean;
  meta?: Partial<GridColumnMeta<TData, TValue>>;
}

Basic Usage

<ActiveGrid
  columns={columns}
  columnDefaults={{
    size: 150,
    enableSorting: true,
    enableResizing: true,
  }}
  {...}
/>

Property Reference

size

Type: number
Default: 150
Description: Default width for all columns

columnDefaults={{
  size: 200, // All columns default to 200px wide
}}

minSize

Type: number
Default: 80
Description: Minimum width for all columns

columnDefaults={{
  minSize: 100,
}}

maxSize

Type: number
Default: 800
Description: Maximum width for all columns

columnDefaults={{
  maxSize: 600,
}}

enableSorting

Type: boolean
Default: true
Description: Enable sorting for all columns by default

columnDefaults={{
  enableSorting: true,
}}

enableResizing

Type: boolean
Default: true
Description: Enable resizing for all columns by default

enablePinning

Type: boolean
Default: true
Description: Enable pinning for all columns by default

enableHiding

Type: boolean
Default: true
Description: Allow all columns to be hidden by default

Complete Example

Common Patterns

Consistent Sizing

Disable All Sorting

Consistent Alignment

Standard Filtering

Override Behavior

Column-specific settings always override defaults:

Use Cases

Read-Only Grid

Compact Layout

Right-Aligned Numbers

Enterprise Grid

Combining with Column Types

Defaults are applied first, then column types, then column-specific settings:

Order of precedence: Column Defaults → Column Types → Column Definition

Best Practices

✅ DO

Set consistent defaults for your use case
Use meta defaults for common patterns
Override selectively in columns
Document non-standard defaults

❌ DON'T

Don't set overly restrictive defaults
Don't override every default in columns
Don't forget defaults affect all columns
Don't use defaults for one-off settings

TypeScript

Examples by Use Case

Data Table

Report Grid

Admin Panel

Mobile View

<ActiveGrid
  columns={columns}
  columnDefaults={{
    size: 180,
    minSize: 100,
    maxSize: 500,
    enableSorting: true,
    enableResizing: true,
    enablePinning: true,
    enableHiding: true,
    meta: {
      truncate: true,
      headerAlign: 'left',
      cellAlign: 'left',
      filterType: 'text',
    },
  }}
  {...}
/>

const columnDefaults = {
  size: 150,
  enableSorting: true,
};

const columns = [
  {
    accessorKey: 'name',
    header: 'Name',
    // Uses default size: 150
    // Uses default enableSorting: true
  },
  {
    accessorKey: 'id',
    header: 'ID',
    size: 80, // Overrides default
    enableSorting: false, // Overrides default
  },
];

columnDefaults={{
  size: 180,
  minSize: 100,
  maxSize: 600,
  enableSorting: true,
  enableResizing: true,
  enablePinning: true,
  enableHiding: true,
  meta: {
    truncate: true,
    filterType: 'text',
    enableFilterOperators: true,
  },
}}

const columnDefaults = {
  size: 150,
  enableSorting: true,
};

const columnTypes = {
  currency: {
    size: 120, // Overrides default
    meta: { cellAlign: 'right' },
  },
};

const columns = [
  {
    accessorKey: 'price',
    header: 'Price',
    type: 'currency',
    size: 140, // Final override
    // Result: size=140, cellAlign='right', enableSorting=true
  },
];

type User = {
  id: string;
  name: string;
  email: string;
};

const columnDefaults: GridColumnDefaults<User> = {
  size: 150,
  enableSorting: true,
  meta: {
    truncate: true,
    filterType: 'text',
  },
};

<ActiveGrid<User>
  columnDefaults={columnDefaults}
  {...}
/>

columnDefaults={{
  size: 180,
  enableSorting: true,
  enableResizing: true,
  enablePinning: true,
  enableHiding: true,
  meta: {
    filterType: 'text',
    enableFilterOperators: true,
    editable: false, // Explicitly opt-in per column
  },
}}

Column Defaults