Async Data Loading

Learn how to load data asynchronously and update the table dynamically.

Interactive Demo

This demo loads data on demand with a loading indicator.

Demo UI Note

This demo includes Undo and Redo buttons above the table. In a real application, these operations are typically triggered via keyboard shortcuts (Ctrl/Cmd+Z for Undo, Ctrl/Cmd+Shift+Z for Redo). The buttons are provided here as an alternative way to interact with the demo without keyboard shortcuts.

What You're Seeing

✅ Lazy Loading - Data loads when component mounts
✅ Loading State - UI indicates data is loading
✅ Dynamic Updates - Table updates after data arrives

How to Use

import { ExtableCore } from "@extable/core";
import type { Schema } from "@extable/core";

const container = document.getElementById("table-container");

const tableSchema: Schema = {
  columns: [
    { key: "id", header: "ID", type: "string", readonly: true, width: 80 },
    { key: "name", header: "Name", type: "string", width: 150 },
    { key: "role", header: "Role", type: "enum", options: ["Admin", "User", "Guest"], width: 120 },
    { key: "department", header: "Department", type: "string", width: 120 },
    { key: "joinDate", header: "Join Date", type: "date", width: 120 },
  ],
};

// Initialize table with null -> loading spinner appears
const core = new ExtableCore(container, {
  data: null,
  schema: tableSchema,
});

const res = await fetch("/api/users");
const users = await res.json();

core.setData(users.map(user => {
  ...user,
  joinDate: Date(user),
}))

Key Points

• setData() method passes loaded data manually.
• defaultData props of React/Vue components accepts temporality null/undefined and shows loading spinner.