Svelte Data Table
Most tables need three things: sorting, filtering and paging. In SvGrid those are opt-in features rather than always-on weight, so a plain read-only table stays small and a full-featured one is a one-line change to the features array.
The component takes a data array and a columns array and renders. Columns are plain objects with a field and a header; everything beyond that, from widths to custom cell snippets, is optional.
Install
npm i @svgrid/gridFree and MIT-licensed in @svgrid/grid: no license key, no row cap, no watermark.
The code
<script lang="ts">
import {
SvGrid, tableFeatures,
rowSortingFeature, columnFilteringFeature, rowPaginationFeature,
type ColumnDef,
} from '@svgrid/grid'
const features = tableFeatures({ rowSortingFeature, columnFilteringFeature, rowPaginationFeature })
const columns: ColumnDef<typeof features, Person>[] = [
{ field: 'firstName', header: 'First name' },
{ field: 'age', header: 'Age' },
]
</script>
<SvGrid {data} {columns} {features} filterMode="row" showPagination pageSize={50} />What you get
- Sorting - Single and multi-column sorting with your own comparators when the default type-aware ordering is not what you want.
- Filtering - A filter row, Excel-style operator menus, or a set filter with checkboxes and a search box inside it.
- Pagination or scrolling - Page through results, or turn pagination off and let row virtualization carry 100,000 rows in one scroll.
- Custom cells - Render any Svelte snippet in a cell: a badge, an avatar, a sparkline, a progress bar or a button.
- Accessible by default - WAI-ARIA grid semantics and full keyboard navigation, so the table is usable without a mouse and readable by a screen reader.
- Free and MIT - The whole table, virtualization included, is in @svgrid/grid with no license key and no row cap.
Live examples
- Quick start - A realistic 25-row × 9-column grid with sort, filter, selection, inline editing, and column resize all enabled.
- Sort, filter, paginate - Three most-asked-for features wired together against ~5k rows.
- Excel-style filters - Per-column operator dropdown with active-filter chips and clear.
- 100k rows × 100 columns - Row + column virtualization. Chunked load with progress + cancellation.
- Cell types showcase - Every editor in one grid: color picker, date picker, 5-star rating, mood feedback, list/chips, number formatting, status badge.
- 1 million rows - A literal 1,000,000-row dataset with sort, filter, group, scroll, and inline edit all on. Chunked generation with progress.
Documentation
- 2. First grid in 60 seconds - !Anatomy of the minimal example: a data rows array and a columns ColumnDef array flow into a SvGrid element that renders a small table with a header row and…
- 4. Features - Every capability is off by default - a bare <SvGrid> is a plain, read-only table. Opt in with boolean props. No imports, no feature constants:
Related articles
- Render Your First Svelte Data Grid in Under 5 Minutes - How to add a fast, accessible, sortable data grid to a Svelte 5 app with SvGrid - covering data, typed columns, feature composition, and the imperative API.
- Data Grid vs Data Table - What's the Difference? - The terms overlap, but they point at different capability levels. Here is how to tell them apart and pick the right abstraction before you start building.
- What Makes a Data Table Accessible? (WCAG) - Semantic markup, WAI-ARIA grid roles, keyboard navigation, and the WCAG criteria that matter most for interactive data tables and grids.
Frequently asked questions
How do I build a sortable, filterable table in Svelte?
Pass data and columns to <SvGrid> and register rowSortingFeature and columnFilteringFeature through tableFeatures. Sorting and filtering are then handled for you.
What is the difference between a data grid and a data table?
A data table displays rows; a data grid also edits them, virtualizes them, groups them and talks to a server. SvGrid is a grid that is perfectly happy being used as a plain table.
How many rows can it render?
Row and column virtualization keep only the visible window in the DOM, so 100,000 rows by 100 columns stay smooth and a one-million-row demo scrolls fine.
Does it work with SvelteKit and SSR?
Yes. The grid is SSR-ready and the starter templates include a SvelteKit project, so data loaded in a load function renders without a flash of empty table.