DataGrid
Flexible and powerful implementation for managing and displaying tabular data. Built with reactive state management using Bond and BondState.
Installation
Import
import { DataGrid } from '@svelte-atoms/core/datagrid';Preset Configuration
Customize the datagrid appearance using presets
You can customize the default styles for DataGrid components by defining presets in your configuration:
Examples
Explore different datagrid variations and use cases
Basic DataGrid
Simple data table display
Name
Email
Role
Alice Johnson
alice@example.com
Admin
Bob Smith
bob@example.com
User
Carol White
carol@example.com
Editor
Code
<script lang="ts">
import { DataGrid } from '@svelte-atoms/core';
interface User {
id: string;
name: string;
email: string;
role: string;
}
const users: User[] = [
{ id: '1', name: 'Alice', email: 'alice@example.com', role: 'Admin' },
{ id: '2', name: 'Bob', email: 'bob@example.com', role: 'User' }
];
</script>
<DataGrid.Root>
<DataGrid.Header>
<DataGrid.Tr>
<DataGrid.Th>Name</DataGrid.Th>
<DataGrid.Th>Email</DataGrid.Th>
<DataGrid.Th>Role</DataGrid.Th>
</DataGrid.Tr>
</DataGrid.Header>
<DataGrid.Body>
{#each users as user}
<DataGrid.Tr>
<DataGrid.Td>{user.name}</DataGrid.Td>
<DataGrid.Td>{user.email}</DataGrid.Td>
<DataGrid.Td>{user.role}</DataGrid.Td>
</DataGrid.Tr>
{/each}
</DataGrid.Body>
</DataGrid.Root>API Reference
DataGrid.Root Props
Prop
Type
Default
Description
multiple
boolean
false
Enable multiple row selection
template
string
-
Column width template (CSS grid template)
values
string[]
[]
Array of selected row IDs
selection
T[]
[]
Array of selected row data
DataGrid.Th Props
Prop
Type
Default
Description
sortable
boolean
false
Enable column sorting
width
string
auto
Column width
Accessibility
Built-in Accessibility Features
- • Proper table semantics with ARIA attributes
- • Keyboard navigation support
- • Screen reader announcements for sorting
- • Focus management for interactive cells
- • Row selection with keyboard