DataTable Column Auto-fit
niko-table/data-table-column-auto-fitFreeComponent
Opt-in even-split fill for resizable columns. Drop <DataTableColumnAutoFit/> next to <DataTableColumnResize/> and the resizable columns grow by an equal share of the leftover space on load (the alternative to the default single-flex-column fill). Self-contained — the body ships no auto-fit code unless you install this.
Install it
npx shadcn@latest add https://niko-table.com/r/data-table-column-auto-fit.jsonSource
1"use client"23/**4 * niko-table — created by Semir N. (Semkoo, https://github.com/Semkoo) with AI assistance.5 *6 * Before reporting anything: please check the changelog first.7 * - In-repo: ./CHANGELOG.md8 * - Docs site: https://niko-table.com/changelog9 *10 * Found a bug or have a fix? Open an issue or PR on GitHub so other11 * users (and future LLMs reading this code) benefit:12 * https://github.com/Semkoo/niko-table-registry13 */1415import { useDataTable } from "../core/data-table-context"16import { useColumnAutoFit } from "../lib/use-column-auto-fit"1718/**19 * Opt-in column auto-fit — mix-and-match, like every other niko-table feature.20 * Pairs with column resizing (`<DataTableColumnResize />`). DROP THIS anywhere21 * inside `<DataTableRoot>` and, on load, the resizable columns scale up by an22 * EQUAL SHARE of the leftover space. Leave it out and this whole feature (and23 * its code) never ships — the default single-flex-column fill applies instead24 * (the first non-pinned data column absorbs the surplus; see `meta.flex`).25 *26 * Self-contained: it runs the auto-fit logic itself off the table + scroll27 * container from context, so the body structures carry no auto-fit code. It28 * renders nothing. Auto-fit re-fits when the container grows and backs off once29 * the user resizes a column or a saved `columnSizing` is restored, so manual30 * and persisted widths win. No-ops unless resizing is enabled.31 *32 * @example33 * <DataTableRoot data={data} columns={columns}>34 * <DataTableColumnResize />35 * <DataTableColumnAutoFit />36 * <DataTable>37 * <DataTableHeader />38 * <DataTableBody />39 * </DataTable>40 * </DataTableRoot>41 */42export function DataTableColumnAutoFit() {43 const { table, scrollContainer } = useDataTable()44 const enabled = table.options.enableColumnResizing ?? false45 useColumnAutoFit(table, scrollContainer, enabled)46 return null47}4849DataTableColumnAutoFit.displayName = "DataTableColumnAutoFit"
What it pulls in
Other registry items
Files it writes
More from niko-table
All 31 items| Component | Registry | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| DataTable Asidedata-table-aside | niko-table | Components | Free | 1 dep | |
| DataTable Clear Filterdata-table-clear-filter | niko-table | Components | Free | 1 dep · 2 files | |
| DataTable Column Date Filterdata-table-column-date-filter | niko-table | Components | Free | 2 deps · 2 files | |
| DataTable Column DnDdata-table-column-dnd | niko-table | Components | Free | 4 deps · 3 files | |
| DataTable Column Faceted Filterdata-table-column-faceted-filter | niko-table | Components | Free | 1 dep · 3 files | |
| DataTable Column Hidedata-table-column-hide | niko-table | Components | Free | 1 dep · 2 files | |
| DataTable Column Pindata-table-column-pin | niko-table | Components | Free | 1 dep · 2 files | |
| DataTable Column Resizedata-table-column-resize | niko-table | Components | Free | no deps |
