sveltekit-advanced-datagrid Svelte Themes

Sveltekit Advanced Datagrid

Download

sv

Everything you need to build a Svelte project, powered by sv.

Creating a project

If you're seeing this, you've probably already done this step. Congrats!

# create a new project in the current directory
npx sv create

# create a new project in my-app
npx sv create my-app

Developing

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Building

To create a production version of your app:

npm run build

You can preview the production build with npm run preview.

To deploy your app, you may need to install an adapter for your target environment.

Advanced DataGrid Component for SvelteKit

A powerful, feature-rich data grid component built for SvelteKit with Svelte 5 and Tailwind CSS. This component provides AgGrid-like functionality including sorting, filtering, pagination, column management, and custom cell renderers.

Features

  • ✅ Column Sorting - Click headers to sort data (asc/desc/none)
  • ✅ Column Filtering - Advanced filtering with multiple operators
  • ✅ Pagination - Full pagination controls with configurable page sizes
  • ✅ Column Hiding/Showing - Hide columns and restore them easily
  • ✅ Column Resizing - Drag column borders to resize
  • ✅ Row Selection - Single or multi-row selection
  • ✅ Custom Cell Renderers - Support for buttons, charts, and custom components
  • ✅ Responsive Design - Mobile-friendly with horizontal scrolling
  • ✅ TypeScript Support - Fully typed with comprehensive interfaces
  • ✅ Tailwind CSS Styling - Beautiful, modern design

Installation

This component is built for SvelteKit with Svelte 5. Make sure you have:

  • SvelteKit
  • Svelte 5
  • Tailwind CSS
  • TypeScript (recommended)

Quick Start

<script lang="ts">
  import { SimpleDataGrid, type DataGridColumn } from '$lib';

  interface User {
    id: number;
    name: string;
    email: string;
    role: string;
  }

  const data: User[] = [
    { id: 1, name: 'John Doe', email: '[email protected]', role: 'Admin' },
    { id: 2, name: 'Jane Smith', email: '[email protected]', role: 'User' },
  ];

  const columns: DataGridColumn<User>[] = [
    {
      id: 'name',
      header: 'Name',
      field: 'name',
      sortable: true,
      filterable: true
    },
    {
      id: 'email',
      header: 'Email',
      field: 'email',
      sortable: true,
      filterable: true
    },
    {
      id: 'role',
      header: 'Role',
      field: 'role',
      sortable: true,
      filterable: true
    }
  ];
</script>

<SimpleDataGrid {columns} rows={data} />

Column Configuration

Basic Column

{
  id: 'name',           // Unique column identifier
  header: 'Full Name',  // Display header text
  field: 'name',        // Field to read from row data
  width: 200,           // Column width in pixels
  sortable: true,       // Enable sorting
  filterable: true,     // Enable filtering
  resizable: true,      // Enable column resizing
  hidden: false         // Initially hidden
}

Custom Value Getter

{
  id: 'salary',
  header: 'Salary',
  field: 'salary',
  valueGetter: (row) => `$${row.salary.toLocaleString()}`,
  sortable: true
}

Filter Configuration

{
  id: 'department',
  header: 'Department',
  field: 'department',
  filterable: true,
  filter: {
    type: 'select',           // 'text' | 'number' | 'date' | 'select' | 'boolean'
    operator: 'equals',       // See operators below
    options: [                // For select type
      { value: 'engineering', label: 'Engineering' },
      { value: 'marketing', label: 'Marketing' }
    ]
  }
}

Filter Operators

  • Text filters: contains, equals, startsWith, endsWith
  • Number filters: equals, greaterThan, lessThan, greaterThanOrEqual, lessThanOrEqual
  • Boolean filters: equals
  • Select filters: equals

Custom Cell Renderers

Button Cells

{
  id: 'actions',
  header: 'Actions',
  cellRenderer: 'button',
  cellRendererParams: {
    label: 'Edit',
    onClick: (value, row, column, rowIndex) => {
      console.log('Edit clicked for:', row);
    }
  }
}

Chart Cells (Sparklines)

{
  id: 'trend',
  header: 'Performance Trend',
  cellRenderer: 'chart',
  cellRendererParams: {
    chartConfig: {
      type: 'sparkline',
      width: 100,
      height: 30,
      color: '#3b82f6'
    }
  },
  valueGetter: (row) => row.performanceData // Array of numbers
}

Custom Renderers

{
  id: 'status',
  header: 'Status',
  cellRenderer: 'custom',
  cellRendererParams: {
    customRenderer: (value, row, column, rowIndex) => {
      return `<span class="badge ${value === 'active' ? 'bg-green-100' : 'bg-red-100'}">${value}</span>`;
    }
  }
}

Component Props

interface Props {
  columns: DataGridColumn[];           // Column definitions
  rows: any[];                        // Data rows
  pagination?: DataGridPaginationConfig;
  selectable?: boolean;               // Enable row selection
  multiSelect?: boolean;              // Allow multiple row selection
  striped?: boolean;                  // Alternate row colors
  bordered?: boolean;                 // Show borders
  hover?: boolean;                    // Hover effects
  loading?: boolean;                  // Show loading state
  emptyMessage?: string;              // Message when no data
  className?: string;                 // Additional CSS classes
  onSelectionChange?: (rows) => void; // Selection change callback
  onSortChange?: (configs) => void;   // Sort change callback
  onFilterChange?: (filters) => void; // Filter change callback
}

Pagination Configuration

const pagination = {
  enabled: true,
  pageSize: 10,
  pageSizeOptions: [5, 10, 25, 50, 100],
  showPageSizeSelector: true,
  showPageInfo: true,
  showFirstLastButtons: true
};

Event Handling

<script>
  function handleSelectionChange(selectedRows) {
    console.log('Selected:', selectedRows);
  }

  function handleSortChange(sortConfigs) {
    console.log('Sort changed:', sortConfigs);
  }

  function handleFilterChange(filters) {
    console.log('Filters:', filters);
  }
</script>

<SimpleDataGrid
  {columns}
  {rows}
  selectable={true}
  multiSelect={true}
  onSelectionChange={handleSelectionChange}
  onSortChange={handleSortChange}
  onFilterChange={handleFilterChange}
/>

Styling

The component uses Tailwind CSS classes. You can customize the appearance by:

  1. Passing custom classes:

    <SimpleDataGrid {columns} {rows} className="shadow-xl rounded-xl" />

  2. Overriding CSS variables or classes in your global styles

  3. Using the bordered, striped, hover props for built-in styling options

Advanced Example

See the demo page (src/routes/+page.svelte) for a comprehensive example showing all features including:

  • Complex data structures
  • Multiple filter types
  • Custom cell renderers (buttons and charts)
  • Row selection
  • Pagination controls
  • Real-time filtering and sorting

Browser Support

This component requires modern browsers that support:

  • ES6+ features
  • CSS Grid and Flexbox
  • Modern DOM APIs

Contributing

  1. Fork the repository
  2. Create a feature branch
  3. Make your changes
  4. Add tests if applicable
  5. Submit a pull request

License

MIT License - feel free to use in your projects!

Component Files

  • SimpleDataGrid.svelte - Main grid component (recommended)
  • DataGrid.svelte - Advanced version (more complex)
  • DataGridHeader.svelte - Column header with sorting/filtering
  • DataGridCell.svelte - Cell renderer component
  • DataGridPagination.svelte - Pagination controls
  • DataGridTypes.ts - TypeScript type definitions

Top categories

tailwinddaisyuiadmin templatepopupmdsvexportfolioblogformecommerceuicarouselauthdarkseoimagerouting
Loading Svelte Themes