TanStack Tables filosofi og headless-design

Et headless UI-bibliotek leverer al den logik, tilstandsadministration og adfærd, du har brug for, men leveres bevidst uden opmærkning eller CSS-regler. Du bestemmer selv over hver pixel i det gengivne resultat.

Det betyder, at du aldrig skal kæmpe mod CSS-overskrivninger eller rode med et biblioteks fastlåste DOM-struktur.

Med en traditionel tabelkomponent kræver det at ændre udseendet, at du overskriver snesevis af typografier og nogle gange laver nødløsninger for den strukturelle HTML. Et headless-bibliotek giver dig dataene og tilstanden og træder derefter i baggrunden.

Resultatet er fuld designfrihed: Du kan bruge Tailwind, CSS Modules, Emotion eller almindelig CSS uden besvær.

TanStack Table v8 fungerer med React, Vue, Solid, Svelte og selv ren JavaScript. Kerne-logikken er uafhængig af rammeværket, og hver adapter pakker den ind i velkendte hooks.

Det betyder, at dine færdigheder kan overføres mellem rammeværker, og at API'et forbliver ensartet.

I React kalder du useReactTable({ data, columns, getCoreRowModel }) og får et tabelobjekt tilbage. Dette objekt er kernen i det hele.

Det indeholder al aktuel tilstand (sortering, sideinddeling, valg) og stiller hjælpemetoder til rådighed, som styrer gengivelsen af din JSX.

TanStack Table gengiver aldrig et eneste HTML-tag på dine vegne. Du skriver selv dine table-, thead-, tbody-, tr-, th- og td-elementer og spørger derefter tabelobjektet, hvilket indhold der skal placeres i dem.

Dette adskiller sig fra AG Grid eller Ant Design Table, som gengiver deres egen DOM og kun stiller begrænsede tilpasningsmuligheder til rådighed.

AG Grid, Material Table og Ant Design Table indeholder komplette renderingsforløb, indbyggede typografier og avancerede brugerflader til funktioner direkte fra start. De er hurtigere at lave prototyper med, men sværere at tilpasse grundigt.

TanStack Table kræver mere indledende opsætning, men giver dig en fuldt tilgængelig tabel, der følger dit brand perfekt, uden at du skal kæmpe med overskrivninger.

Fordi TanStack Table ikke leverer typografier, og du kun importerer de rækkemodeller, du faktisk bruger (sortering, filtrering, sideinddeling), forbliver ressourceaftrykket lille.

Du betaler kun for de funktioner, du aktiverer, hvilket gør det velegnet til programmer, hvor ydeevnen er vigtig.

Da TanStack Table ikke producerer nogen opmærkning, er integrationen med Tailwind CSS så enkel som at føje klassenavne til dine egne tr- og td-elementer. Det samme gælder CSS Modules og enhver anden tilgang til styling.

Der er ingen kamp om specificitet, fordi der ikke er indbyggede typografier, der skal overskrives.

Den headless-tilgang kræver mere kode fra start. Du skal selv skrive renderingsløkken og forbinde tilstandshåndteringer manuelt.

Når du først har bygget din grundtabelkomponent, kan du genbruge den i hele programmet med ensartet formgivning.

Hooket useReactTable accepterer et konfigurationsobjekt med som minimum data (dit array af objekter), columns (et ColumnDef-array) og getCoreRowModel.

Den returnerede tabelinstans stiller getHeaderGroups() til rådighed for overskrifter og getRowModel().rows for tabelkroppens rækker, som du gennemløber i JSX.

Begynd med at installere @tanstack/react-table, definér arrayet columns, kald useReactTable, og gengiv derefter dit eget table-element ved hjælp af hjælpemetoderne. Biblioteket håndterer al tilstand og alle afledte data; du håndterer al opmærkning.

Denne klare opdeling gør dine tabelkomponenter testbare og dit designsystem sammenhængende.

TanStack Table er et headless, rammeværksuafhængigt tabelbibliotek, der leverer tilstand og logik, mens al gengivelse overlades til dig. Du kalder useReactTable, modtager en tabelinstans og gennemløber dens hjælpemetoder for at opbygge din egen opmærkning.

Det betyder ingen stilkonflikter, fuld frihed til CSS-rammeværker og en pakkestørrelse, der kun omfatter det, du bruger.