TanStack Table i React Data Grids

Co to jest TanStack Table (react-table v8) i jak działa?

TanStack Table (react-table v8, Tanner Linsley): headless table library. Brak domyślnego UI — tylko logika. Kompatybilny z React, Vue, Solid, Svelte, Vanilla JS. Core: useReactTable hook (React adapter). columnDefs — definicje kolumn. data — dane wierszy. getCoreRowModel(). Podstawowe użycie: import {useReactTable, createColumnHelper, getCoreRowModel, flexRender} from '@tanstack/react-table'. const columnHelper = createColumnHelper(). const columns = [columnHelper.accessor('name', {header: 'Name', cell: info => info.getValue()}), columnHelper.accessor('age', {header: 'Age'})]. const table = useReactTable({data, columns, getCoreRowModel: getCoreRowModel()}). Render: table.getHeaderGroups(). table.getRowModel().rows. flexRender(cell.column.columnDef.cell, cell.getContext()). Features (plug-in model): sorting: getSortedRowModel(). filtering: getFilteredRowModel(). pagination: getPaginationRowModel(). column visibility. column ordering. row selection. row expansion. column pinning. faceting. Global filter: import {getFilteredRowModel} from '@tanstack/react-table'. state: {globalFilter}. onGlobalFilterChange. Headless pattern: TanStack Table daje state i logikę. Ty budujesz HTML/JSX. Możesz użyć dowolny CSS. Tailwind, shadcn/ui, MUI — kompatybilne. TypeScript: createColumnHelper generyczny. Kolumny mają pełne typy. Cell values typed automatycznie.

Sortowanie, filtrowanie i paginacja w TanStack Table?

Sortowanie: const [sorting, setSorting] = useState([]). getSortedRowModel(). state: {sorting}. onSortingChange: setSorting. column.getToggleSortingHandler() na header click. column.getIsSorted() — 'asc' | 'desc' | false. Multi-sort: shiftKey + click. enableMultiSort: true. Filtrowanie column-level: getFilteredRowModel(). column.getFilterValue(). column.setFilterValue(value). input onChange={e => column.setFilterValue(e.target.value)}. Filtry custom: filterFns — własna logika. includesString, fuzzy, rangeMin, rangeMax. facetedUniqueValues() — unikalne wartości kolumny dla select filter. Global filter: onGlobalFilterChange. globalFilter w state. Wszystkie kolumny przeszukane. Paginacja: getPaginationRowModel(). state: {pagination}. onPaginationChange. table.previousPage(), table.nextPage(). table.getCanPreviousPage(). table.getPageCount(). table.setPageSize(10). pageIndex + pageSize w state. Manual pagination (server-side): manualPagination: true. pageCount: totalPages. pageIndex -> fetch page from server. rowCount: total count. Wirtualizacja: @tanstack/react-virtual + TanStack Table. const rowVirtualizer = useVirtualizer({count: rows.length, getScrollElement: () => tableContainerRef.current, estimateSize: () => 35, overscan: 20}). Renderuj tylko visible rows. 10 000+ wierszy bez lagów. Sorting + Filtering server-side: manualSorting: true. manualFiltering: true. useEffect(() => fetchData(sorting, filters)). Debounce filter input.

AG Grid vs TanStack Table vs MUI DataGrid — co wybrać?

TanStack Table (react-table v8): headless — zero UI. Maksymalna elastyczność. Darmowy, open source. Wymaga własnego UI. Doskonały z Tailwind/shadcn. Nie ma built-in wirtualizacji (potrzebuje react-virtual). Idealny: projekty z custom design. AG Grid Community: najbardziej zaawansowana open source. Wbudowane: sorting, filtering, paginacja, row grouping, pivoting, tree data, wirtualizacja. Własne UI (AG Theme). Rozmiar: cięższa biblioteka. AG Grid Enterprise: płatna. Range selection, Excel export, server-side row model, advanced pivoting. Kiedy: enterprise dashboards, heavy data. MUI DataGrid (darmowy): Material UI data table. Sorting, filtering, paginacja. Pro (płatny): row grouping, Excel export, tree data. Dobrze integruje się z MUI ecosystem. Kiedy: projekty MUI. Tanstack Virtual: react-window successor. Wirtualizacja list i tabeli. useVirtualizer hook. Kompatybilny z TanStack Table. react-window / react-virtualized: starsze, react-window prostszy. Mniej feature-rich. Row Virtualization threshold: powyżej 100 wierszy rozważ wirtualizację. Powyżej 1000 — konieczna. Data Table z shadcn/ui: shadcn/ui Data Table = TanStack Table + shadcn UI. Dokumentacja shadcn: gotowy przepis. Column visibility, sorting, filtering. Doskonały starting point. Tabele porównawcze: pnpm dlx shadcn-ui@latest add table. Następnie TanStack Table + custom columns.

Zaawansowane feature'y tabel — row selection, expansion i column pinning?

Row Selection: enableRowSelection: true lub fn. state: {rowSelection}. onRowSelectionChange. row.getIsSelected(). row.getToggleSelectedHandler(). table.getSelectedRowModel(). Header checkbox: table.getIsAllPageRowsSelected(). table.toggleAllPageRowsSelected(). Indeterminate state dla partial selection. Expanded Rows: getExpandedRowModel(). row.getIsExpanded(). row.getToggleExpandedHandler(). row.subRows — nested rows. renderSubComponent({row}) — custom expansion. Custom Cell Rendering: columnHelper.accessor('status', {cell: ({getValue}) => {const status = getValue(); return span className={status === 'active' ? 'text-green-500' : 'text-red-500'}}}). Ikony, badges, akce w komórkach. Column Resizing: enableColumnResizing: true. columnResizeMode: 'onChange' | 'onEnd'. header: {column.getResizerElement()}. Column.getSize() do szerokości CSS. Column Pinning: column.pin('left' | 'right' | false). table.getLeftHeaderGroups(). table.getCenterHeaderGroups(). table.getRightHeaderGroups(). Sticky kolumny: CSS sticky + z-index. Left frozen columns dla ID/checkbox. Column Visibility: table.getAllColumns(). column.getIsVisible(). column.toggleVisibility(). Dropdown menu do zarządzania kolumnami. Column Ordering: setColumnOrder([...ids]). Drag and drop ordering. dnd-kit + TanStack Table. Row Grouping (AG Grid feature): TanStack Table — manual z row expansion. AG Grid Community — built-in. Eksport CSV: table.getFilteredRowModel().rows. reduce do CSV string. Download Blob. Lub xlsx + ExcelJS dla XLSX.

Data tables w Next.js — server-side data fetching i URL state?

URL State dla tabeli (nuqs library): import {useQueryState, parseAsInteger, parseAsString} from 'nuqs'. const [page, setPage] = useQueryState('page', parseAsInteger.withDefault(0)). const [search, setSearch] = useQueryState('q'). const [sort, setSort] = useQueryState('sort'). URL: /users?page=2&q=adam&sort=name. Shareable URL, browser history, refresh safe. nuqs: React, Next.js App Router, Remix, Vite. Server-side data fetching (Next.js App Router): async function UsersPage({searchParams}) {const {page = 0, q = '', sort = 'name'} = searchParams. const users = await db.user.findMany({skip: page * 10, take: 10, where: {name: {contains: q}}, orderBy: {[sort]: 'asc'}}). return DataTable({data: users})}. Client-side search z debounce: useDebounce(searchValue, 300). TanStack Query dla refetch: useQuery({queryKey: ['users', page, search, sort], queryFn: () => fetchUsers({page, search, sort})}). Infinite loading: useInfiniteQuery. fetchNextPage przy scroll do dołu. IntersectionObserver lub @tanstack/react-virtual. React Query DevTools: podgląd stanu queries. Sprawdź cache hits. Deduplication. Stale time konfiguracja. shadcn/ui + TanStack Table recipe: pnpm dlx shadcn-ui@latest add data-table. Gotowe: DataTable, DataTableColumnHeader, DataTableFacetedFilter, DataTablePagination, DataTableViewOptions. Najlepszy starting point dla enterprise table.

Wyślij zapytanie