Getting Started with Data Tables using svar-datagrid in Svelte

svar-datagrid (also known as SVAR Svelte DataGrid) is a powerful table widget for Svelte applications that provides features like sorting, filtering, resizing, editing, pagination, and dynamic data loading. It offers a comprehensive solution for displaying and managing tabular data in your Svelte projects. This guide walks through installing svar-datagrid and building your first interactive data table. This article is part 31 of a series on using svar-datagrid with Svelte.

Prerequisites

Before you begin, make sure you have:

• Node.js version 16 or higher installed
• npm or yarn package manager
• A basic understanding of Svelte (components, props, reactivity)
• A Svelte project set up (using SvelteKit, Vite, or any Svelte setup)

For this tutorial, we'll work with a simple Svelte component structure. The key concepts you'll learn are:

• Data structure: How to format your data for the grid
• Column configuration: Defining columns with headers, widths, and properties
• Basic features: Sorting, filtering, and resizing columns
• Event handling: Listening to grid events for user interactions

Installation

Install the svar-datagrid package using npm:

npm install wx-svelte-grid

Or with yarn:

yarn add wx-svelte-grid

After installation, your package.json should include the dependency:

{
  "dependencies": {
    "wx-svelte-grid": "^1.0.0"
  }
}

Project Setup

No additional configuration files are required. The Grid component can be used directly in your Svelte components after installation. You can start using it immediately by importing it into any .svelte file.

First Example / Basic Usage

Let's create a simple example with a basic data table:

<!-- src/components/SimpleGrid.svelte -->
<script>
  import { Grid } from "wx-svelte-grid";

  const data = [
    {
      id: 1,
      email: "[e-mail]",
      firstName: "Ernest",
      lastName: "Schuppe",
    },
    {
      id: 2,
      email: "[e-mail]",
      firstName: "Janis",
      lastName: "Vandervort",
    },
    {
      id: 3,
      email: "[e-mail]",
      firstName: "John",
      lastName: "Doe",
    },
  ];

  const columns = [
    {
      id: "id",
      width: 50
    },
    {
      id: "firstName",
      header: "First Name",
      footer: "First Name",
      width: 150,
    },
    {
      id: "lastName",
      header: "Last Name",
      footer: "Last Name",
      width: 150,
    },
    {
      id: "email",
      header: "Email",
      footer: "Email",
    },
  ];
</script>

<div style="padding: 20px;">
  <Grid {data} {columns} />
</div>

This example demonstrates:

• Import: We import Grid from wx-svelte-grid
• Data array: Each object in the data array represents a row in the table
• Columns array: Each object defines a column with id (matching data keys), header (column title), and width
• Component usage: The Grid component receives data and columns as props

When you render this component, you'll see a fully functional data table with sortable headers and resizable columns.

Understanding the Basics

How svar-datagrid Integrates with Svelte

svar-datagrid is built specifically for Svelte and follows Svelte's reactive patterns:

1. Props: The Grid component accepts data and columns as props
2. Reactivity: The grid automatically updates when data or columns change
3. Events: You can listen to various grid events using the init function
4. No wrapper needed: Unlike some libraries, you don't need a skin wrapper

Data Structure

The data prop expects an array of objects. Each object represents a row, and the keys should match the column id values:

<script>
  import { Grid } from "wx-svelte-grid";

  // Each object is a row
  const data = [
    {
      id: 1,
      city: "Amieshire",
      email: "[e-mail]",
      firstName: "Ernest",
      lastName: "Schuppe",
      companyName: "Lebsack - Nicolas",
    },
    {
      id: 2,
      city: "Gust",
      email: "[e-mail]",
      firstName: "Janis",
      lastName: "Vandervort",
      companyName: "Glover - Hermiston",
    },
  ];
</script>

Column Configuration

Columns are defined with various properties:

<script>
  import { Grid } from "wx-svelte-grid";

  const data = [
    { id: 1, firstName: "Ernest", lastName: "Schuppe", email: "[e-mail]" },
    { id: 2, firstName: "Janis", lastName: "Vandervort", email: "[e-mail]" },
  ];

  const columns = [
    { 
      id: "id",           // Must match data key
      width: 50           // Fixed width in pixels
    },
    { 
      id: "firstName",
      header: "First Name",  // Column header text
      footer: "First Name",  // Column footer text (optional)
      width: 150,
      sort: true            // Enable sorting
    },
    { 
      id: "lastName",
      header: "Last Name",
      width: 150,
      resize: true          // Allow manual column resizing
    },
    { 
      id: "email",
      header: "Email"       // Width auto-calculated if not specified
    },
  ];
</script>

<Grid {data} {columns} />

Key column properties:

• id: Required - must match a key in your data objects
• header: Column title displayed in the header row
• footer: Optional footer text
• width: Column width in pixels (optional)
• sort: Boolean to enable sorting (default: false)
• resize: Boolean to allow manual resizing (default: false)

Practical Example / Building Something Real

Let's build a complete employee directory with sorting, filtering, and resizable columns:

<!-- src/components/EmployeeDirectory.svelte -->
<script>
  import { Grid } from "wx-svelte-grid";

  const data = [
    {
      id: 1,
      firstName: "Ernest",
      lastName: "Schuppe",
      email: "[e-mail]",
      department: "Engineering",
      salary: 85000,
      startDate: "2020-01-15",
    },
    {
      id: 2,
      firstName: "Janis",
      lastName: "Vandervort",
      email: "[e-mail]",
      department: "Marketing",
      salary: 72000,
      startDate: "2019-03-20",
    },
    {
      id: 3,
      firstName: "John",
      lastName: "Doe",
      email: "[e-mail]",
      department: "Sales",
      salary: 65000,
      startDate: "2021-06-10",
    },
    {
      id: 4,
      firstName: "Jane",
      lastName: "Smith",
      email: "[e-mail]",
      department: "Engineering",
      salary: 92000,
      startDate: "2018-11-05",
    },
    {
      id: 5,
      firstName: "Bob",
      lastName: "Johnson",
      email: "[e-mail]",
      department: "HR",
      salary: 58000,
      startDate: "2022-02-28",
    },
  ];

  const columns = [
    {
      id: "id",
      width: 50,
      sort: true,
    },
    {
      id: "firstName",
      header: "First Name",
      width: 150,
      sort: true,
      resize: true,
    },
    {
      id: "lastName",
      header: "Last Name",
      width: 150,
      sort: true,
      resize: true,
    },
    {
      id: "email",
      header: "Email",
      width: 250,
      sort: true,
      resize: true,
    },
    {
      id: "department",
      header: "Department",
      width: 150,
      sort: true,
      resize: true,
    },
    {
      id: "salary",
      header: "Salary",
      footer: "Salary",
      width: 120,
      sort: true,
      resize: true,
    },
    {
      id: "startDate",
      header: "Start Date",
      width: 120,
      sort: true,
      resize: true,
    },
  ];

  function init(api) {
    api.on("sort-rows", (ev) => {
      console.log("Sorted by:", ev.key, "Direction:", ev.direction);
    });
  }
</script>

<div style="padding: 20px;">
  <h2>Employee Directory</h2>
  <p style="color: #666; margin-bottom: 20px;">
    Click column headers to sort, drag borders to resize columns.
  </p>
  <Grid {data} {columns} {init} />
</div>

This example demonstrates:

• Complete data structure: Multiple fields per employee record
• Sortable columns: All columns have sort: true enabled
• Resizable columns: Users can drag column borders to adjust widths
• Event handling: The init function sets up event listeners for sorting
• Professional layout: Header, description, and styled grid
• Real-world use case: A practical employee directory application

Common Issues / Troubleshooting

Issue 1: Grid Not Displaying Data

Problem: The grid renders but shows no data or empty cells.

Solution: Ensure that the id values in your columns array exactly match the keys in your data objects:

<!-- ❌ Wrong - column id doesn't match data key -->
<script>
  const data = [{ userId: 1, name: "John" }];
  const columns = [{ id: "id", header: "ID" }]; // 'id' doesn't exist in data
</script>

<!-- ✅ Correct - column id matches data key -->
<script>
  const data = [{ userId: 1, name: "John" }];
  const columns = [{ id: "userId", header: "ID" }]; // Matches!
</script>

Issue 2: Sorting Not Working

Problem: Clicking column headers doesn't sort the data.

Solution: Make sure you've set sort: true in the column definition:

<!-- ❌ Wrong - sorting not enabled -->
const columns = [
  { id: "firstName", header: "First Name" }
];

<!-- ✅ Correct - sorting enabled -->
const columns = [
  { id: "firstName", header: "First Name", sort: true }
];

Issue 3: Columns Too Narrow or Wide

Problem: Columns appear too small or take up too much space.

Solution: Set explicit width values for columns, or use flexgrow for flexible sizing:

<!-- ✅ Fixed width -->
const columns = [
  { id: "id", width: 50 },
  { id: "name", width: 200 },
];

<!-- ✅ Flexible width (takes remaining space) -->
const columns = [
  { id: "id", width: 50 },
  { id: "name", flexgrow: 1 }, // Takes remaining space
];

Issue 4: Import Errors

Problem: Module not found or import errors.

Solution: Verify the package is installed and you're using the correct import path:

<!-- ✅ Correct import -->
import { Grid } from "wx-svelte-grid";

Make sure the package name is exactly wx-svelte-grid (not svar-datagrid or @svar/datagrid). Run npm install wx-svelte-grid if you haven't already.

Next Steps

Now that you've learned the basics of svar-datagrid, here are some directions to continue learning:

1. Filtering: Learn how to add filters to columns using the header.filter property
2. Cell Editing: Explore inline cell editing with the editor property
3. Row Selection: Implement row selection and bulk operations
4. Pagination: Add pagination for large datasets
5. Custom Cell Rendering: Use the template property to customize how cells are displayed
6. Event Handling: Explore more grid events like filter-rows, select-row, and update-cell
7. Dynamic Data Loading: Learn how to load data dynamically as users scroll
8. Official Documentation: Visit the svar-datagrid documentation for complete API reference

Continue with other articles in this series to learn about advanced features, custom editors, complex filtering, and more sophisticated use cases.

Summary

You've learned how to install svar-datagrid in a Svelte project, configure columns and data, and build a complete employee directory with sorting and resizing. You should now be able to integrate svar-datagrid into your Svelte applications, display tabular data effectively, and enable basic interactive features like sorting and column resizing.