DT Dog Table
Dog Table v1.4

Advanced table workflows without a framework-sized setup.

Dog Table is a lightweight vanilla JavaScript data table for teams that need sorting, search, pagination, remote data, grouping, export, editing, and live refresh in a small API surface.

Read documentation Open examples

Works with plain HTML, modern bundlers, and production UIs that want table behavior without pulling in a full component framework.

Install

Install Dog Table in a few straightforward steps.

The structure here follows a simple landing-page flow: install, initialize, then branch into docs or examples depending on how deep you want to go.

Full docs Remote demo
1. Install package 
npm install dog-table
2. Import CSS and render 
import { DogTable } from "dog-table";
import "dog-table/css";

const table = new DogTable("#app", {
  data: [
    { id: 1, name: "Mochi", status: "ready" },
    { id: 2, name: "Pepper", status: "pending" },
  ],
  columns: [
    { key: "name", label: "Name" },
    { key: "status", label: "Status" },
  ],
});

table.init();
Use local data first

Start with the basic demo if you want to learn the core constructor and column setup before adding plugins or remote fetch logic.

Add features incrementally

Dog Table lets you layer in row detail, persistence, selection, export, editing, and live polling as your table needs grow.

Move to remote mode when needed

Switch to `remote` config when the dataset belongs on the server. Requests are abortable and respond to search, sort, and page state.

Why Dog Table

Practical defaults for the table work teams actually ship.

Easy to wire up

The constructor API stays small: pass a container, data, columns, and optional feature configs. Then call `init()`.

Extensible without ceremony

Persistence, selection, export, formatting, editing, and live refresh are already organized as internal modules you can build on.

Made for real app flows

Remote pagination, localization, expandable rows, and detail panels cover the higher-friction use cases that simple table examples usually skip.

Examples

Browse the feature set through focused examples.

Instead of one massive demo, each page isolates a workflow so it is easier to inspect, copy, and test.

Reference

Documentation

Installation, options, methods, hooks, plugins, and a guided overview of the current API surface.

Open docs Core

Basic Local Table

Start with local rows, search, sorting, pagination, and a clean starter configuration.

View basic demo Rendering

Custom Cells

Mix DOM nodes, richer row metadata, and custom filter logic in a straightforward column definition.

View custom cells Styling

Theme Presets

Compare the default, Bootstrap, and Tailwind-oriented class mappings against the same table model.

View themes Remote

Remote Fetch

See server-style paging, sorting, abortable loading, and search against a live public API.

View remote demo Power Tools

Advanced Features

Selection, CSV export, persistence, and column visibility controls in one place.

View advanced demo
More demos

Keep going into specialized workflows.

Grouping and Detail

Grouped sections with expandable row detail panels.

Open demo

Localization

Swap language bundles and override interface copy.

Open demo

Formatting

Currency, date, and number formatting examples with locale-aware output.

Open demo Input

Inline Editing

Editable cells and direct row update flows.

Open demo Input

Create Record

Built-in modal workflows for adding new rows with field validation and custom inputs.

Open demo Real-time

Live Sync

Adaptive polling, visible status, and mocked live updates.

Open demo

Pagination Guard

Optional max page and page-size guardrails with clamp examples.

Open demo

API Methods

Jump straight to the method reference for programmatic control of the table instance.

Read API reference