Overview
The DataGrid component provides a complete solution for displaying and managing tabular data in Svelte applications. It supports advanced features like column sorting, row selection, responsive layouts, and full customization through the Bond system.
Installation
npm install @svelte-atoms/core
Basic Usage
<script>
import { DataGrid } from '@svelte-atoms/core';
</script>
<DataGrid.Root>
<DataGrid.Header>
<DataGrid.Tr header>
<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>
Components
DataGrid.Root
The root container for the data grid. Manages the overall state and provides context to child components.
Additional CSS classes to apply to the root element
CSS grid template columns definition (e.g., “1fr 2fr 1fr”)
Fallback template when no template is provided
Array of values (bindable)
Custom factory function for creating the DataGrid bond
Child content with access to datagrid bond context
Additional CSS classes for the header
Header content, typically DataGrid.Tr with header prop
DataGrid.Body
Container for the body rows of the data grid.
Additional CSS classes for the body
Body content, typically multiple DataGrid.Tr components
Additional CSS classes for the footer
DataGrid.Tr
Represents a table row in the data grid.
Additional CSS classes for the row
Unique identifier for the row (auto-generated if not provided)
CSS grid rows configuration
Data associated with this row
Whether this is a header row
Click handler for the row
DataGrid.Th
Header cell component with sorting support.
Additional CSS classes for the header cell
Unique identifier for the column (auto-generated if not provided)
Column width in CSS units
direction
'asc' | 'desc'
default:"asc"
Sort direction for this column
Enable sorting for this column. Can be true/false or a function to extract sort value
Screen size breakpoint for responsive visibility
Callback when column is sorted
DataGrid.Td
Data cell component.
Additional CSS classes for the cell
Click handler for the cell
DataGrid.Checkbox
Checkbox component for row selection.
Additional CSS classes for the checkbox
Callback when checkbox state changes
Advanced Examples
With Row Selection
<script>
import { DataGrid } from '@svelte-atoms/core';
let users = [
{ id: '1', name: 'John Doe', email: '[email protected]' },
{ id: '2', name: 'Jane Smith', email: '[email protected]' }
];
</script>
<DataGrid.Root>
<DataGrid.Header>
<DataGrid.Tr header>
<DataGrid.Th width="auto">
<DataGrid.Checkbox />
</DataGrid.Th>
<DataGrid.Th>Name</DataGrid.Th>
<DataGrid.Th>Email</DataGrid.Th>
</DataGrid.Tr>
</DataGrid.Header>
<DataGrid.Body>
{#each users as user (user.id)}
<DataGrid.Tr value={user.id} data={user}>
<DataGrid.Td>
<DataGrid.Checkbox />
</DataGrid.Td>
<DataGrid.Td>{user.name}</DataGrid.Td>
<DataGrid.Td>{user.email}</DataGrid.Td>
</DataGrid.Tr>
{/each}
</DataGrid.Body>
</DataGrid.Root>
With Sortable Columns
<script>
import { DataGrid } from '@svelte-atoms/core';
let users = [
{ name: 'John', age: 30 },
{ name: 'Jane', age: 25 },
{ name: 'Bob', age: 35 }
];
function handleSort(event, { field, direction }) {
// Custom sorting logic
users = users.sort((a, b) => {
const aVal = typeof field === 'function' ? field(a) : a[field];
const bVal = typeof field === 'function' ? field(b) : b[field];
return direction === 'asc' ? aVal - bVal : bVal - aVal;
});
}
</script>
<DataGrid.Root>
<DataGrid.Header>
<DataGrid.Tr header>
<DataGrid.Th sortable="name" onsort={handleSort}>Name</DataGrid.Th>
<DataGrid.Th sortable="age" onsort={handleSort}>Age</DataGrid.Th>
</DataGrid.Tr>
</DataGrid.Header>
<DataGrid.Body>
{#each users as user}
<DataGrid.Tr>
<DataGrid.Td>{user.name}</DataGrid.Td>
<DataGrid.Td>{user.age}</DataGrid.Td>
</DataGrid.Tr>
{/each}
</DataGrid.Body>
</DataGrid.Root>
Responsive Columns
<script>
import { DataGrid } from '@svelte-atoms/core';
import { container } from '@svelte-atoms/core/runes';
const gridContainer = container();
</script>
<DataGrid.Root {@attach gridContainer.attach}>
<DataGrid.Header>
<DataGrid.Tr header>
<DataGrid.Th>Name</DataGrid.Th>
<DataGrid.Th
hidden={gridContainer.current?.width < 768}>
Email
</DataGrid.Th>
<DataGrid.Th
hidden={gridContainer.current?.width < 1024}>
Phone
</DataGrid.Th>
</DataGrid.Tr>
</DataGrid.Header>
<!-- Body content -->
</DataGrid.Root>
Types
Direction
type Direction = 'asc' | 'desc';
SortableType
type SortableType = string | (<T>(d: T) => string | number | boolean | Date);
DatagridContext
interface DatagridContext<T = unknown> extends DataGridBond<T> {
[key: string]: unknown;
}
Styling
The DataGrid uses CSS Grid for layout and can be fully customized using Tailwind CSS classes or custom CSS.
Default Classes
datagrid-root: Root container with CSS Grid displaydatagrid-tr: Table row with grid layoutborder-border: Border styling- Hover and active states for interactive rows
Custom Styling
<DataGrid.Root class="rounded-lg shadow-lg">
<DataGrid.Th class="bg-blue-100 font-bold">
Custom Header
</DataGrid.Th>
<DataGrid.Td class="text-gray-600 italic">
Custom Cell
</DataGrid.Td>
</DataGrid.Root>
Bond System
The DataGrid component uses the Bond system for state management. You can access the bond instance through the component’s context:
<script>
let datagridRef;
$effect(() => {
if (datagridRef) {
const bond = datagridRef.getBond();
// Access bond state and methods
console.log(bond.state.selectedRows);
}
});
</script>
<DataGrid.Root bind:this={datagridRef}>
<!-- Content -->
</DataGrid.Root>
Accessibility
- Keyboard navigation support
- ARIA labels for sortable columns
- Screen reader friendly row selection
- Focus management for interactive elements
Related Components