Configuration Profiles

Use configuration profiles when you want consistent site-wide tables without forcing every table into one global look. A global config can define defaults, named table profiles can define reusable variants, and named cell configs can define reusable cell styling such as RichItem.

const yableConfig = createYableConfig({
  table: { theme: 'midnight', striped: true, stickyHeader: true },
  columns: {
    default: { size: 160, minSize: 80, maxSize: 420, enableResizing: true },
  },
  rows: { className: 'row-comfortable' },
  cells: {
    named: {
      RichItem: {
        cellStyle: { whiteSpace: 'normal', lineHeight: 1.35, fontWeight: 600 },
      },
    },
  },
  profiles: {
    compactVariant: {
      table: { theme: 'compact', compact: true, stickyHeader: false },
      columns: { default: { size: 112, minSize: 56 } },
      rows: { className: 'row-compact' },
    },
  },
})

<YableProvider config={yableConfig}>
  <EmployeeTable />
</YableProvider>

const columns = [
  columnHelper.accessor('name', {
    header: 'Name',
    cellConfig: 'RichItem',
    cellStyle: { color: 'var(--yable-color-accent)' }, // local override
  }),
]

const table = useTable({ data, columns, configProfile: 'compactVariant' })
;<Table table={table} configProfile="compactVariant" />

Config precedence is: global defaults, named table profile, table defaultColumnDef, named cell config, profile column overrides, inline column definition, then explicit <Table> props. This keeps global config useful without locking teams out of per-table or per-cell exceptions.

---