BlockDex

Components

Registries

Free blocks

Method

BlockDex

Components

Registries

Free blocks

Method

Open API

BlockDex

Components

Registries

Free blocks

Method

Open API

Components/niko-table/data-table-column-auto-fit

DataTable Column Auto-fit

niko-table/data-table-column-auto-fit
FreeComponent

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.json

Source

src/components/niko-table/components/data-table-column-auto-fit.tsxniko-table.com/r/data-table-column-auto-fit.json
1"use client"
2
3/**
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.md
8 * - Docs site: https://niko-table.com/changelog
9 *
10 * Found a bug or have a fix? Open an issue or PR on GitHub so other
11 * users (and future LLMs reading this code) benefit:
12 * https://github.com/Semkoo/niko-table-registry
13 */
14
15import { useDataTable } from "../core/data-table-context"
16import { useColumnAutoFit } from "../lib/use-column-auto-fit"
17
18/**
19 * Opt-in column auto-fit — mix-and-match, like every other niko-table feature.
20 * Pairs with column resizing (`<DataTableColumnResize />`). DROP THIS anywhere
21 * inside `<DataTableRoot>` and, on load, the resizable columns scale up by an
22 * EQUAL SHARE of the leftover space. Leave it out and this whole feature (and
23 * its code) never ships — the default single-flex-column fill applies instead
24 * (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 + scroll
27 * container from context, so the body structures carry no auto-fit code. It
28 * renders nothing. Auto-fit re-fits when the container grows and backs off once
29 * the user resizes a column or a saved `columnSizing` is restored, so manual
30 * and persisted widths win. No-ops unless resizing is enabled.
31 *
32 * @example
33 * <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 ?? false
45 useColumnAutoFit(table, scrollContainer, enabled)
46 return null
47}
48
49DataTableColumnAutoFit.displayName = "DataTableColumnAutoFit"

What it pulls in

Other registry items

  • https://niko-table.com/r/data-table.json
  • https://niko-table.com/r/data-table-column-resize.json

Files it writes

  • src/components/niko-table/components/data-table-column-auto-fit.tsx
  • src/components/niko-table/lib/use-column-auto-fit.ts

Facts

Registry
niko-table
Type
registry:component
Access
Free
Files written
2
Licence
the repository states none
First indexed
2026-08-02
Last confirmed
yesterday

Go to the source

niko-table.com Semkoo/niko-table-registry on GitHub Raw registry item This item as JSON

More from niko-table

All 31 items
Same registry, same kind — the ones you would have found next
ComponentRegistryKindAccessInstallsCommand
DataTable Asidedata-table-asideniko-tableComponentsFree1 dep
DataTable Clear Filterdata-table-clear-filterniko-tableComponentsFree1 dep · 2 files
DataTable Column Date Filterdata-table-column-date-filterniko-tableComponentsFree2 deps · 2 files
DataTable Column DnDdata-table-column-dndniko-tableComponentsFree4 deps · 3 files
DataTable Column Faceted Filterdata-table-column-faceted-filterniko-tableComponentsFree1 dep · 3 files
DataTable Column Hidedata-table-column-hideniko-tableComponentsFree1 dep · 2 files
DataTable Column Pindata-table-column-pinniko-tableComponentsFree1 dep · 2 files
DataTable Column Resizedata-table-column-resizeniko-tableComponentsFreeno deps
BlockDex

Built by

Kynth Studio

Index

Components
Registries
Method
Open API

Guides

shadcn component libraries
Best shadcn registries
Free shadcn blocks

Reference

Corpus counts
Crawl health
hello@kynth.studio
Privacy
Terms

BlockDex

BlockDex

Built by

Kynth Studio

Index

Components
Registries
Method
Open API

Guides

shadcn component libraries
Best shadcn registries
Free shadcn blocks

Reference

Corpus counts
Crawl health
hello@kynth.studio
Privacy
Terms

BlockDex

BlockDex

Built by

Kynth Studio

Index

Components
Registries
Method
Open API

Guides

shadcn component libraries
Best shadcn registries
Free shadcn blocks

Reference

Corpus counts
Crawl health
hello@kynth.studio
Privacy
Terms

BlockDex