Getting Started

You're 30 seconds away from a working datatable. No config files, no providers, no context wrappers.

Install it

npmyarnpnpmbun

bash

npm install mundane-ui

bash

yarn add mundane-ui

bash

pnpm add mundane-ui

bash

bun add mundane-ui

Import the CSS

One file. That's it. The plain theme gives you the intentionally-boring default look (black borders, black text, white background).

import 'mundane-ui/css/plain.css'

Using a <link> tag? Sure:

html

<link rel="stylesheet" href="node_modules/mundane-ui/dist/css/plain.css">

Why does it look so plain?

On purpose. When the default look is "nothing", overriding it to match your design takes minutes, not hours. See Styling & Theming for the 4 ways to customize it.

Create a table

html

<div id="my-table"></div>

import { DataTable } from 'mundane-ui'
import 'mundane-ui/css/plain.css'

const table = DataTable.create({
  el: '#my-table',
  mode: 'frontend',
  data: [
    { name: 'Alice', age: 30, email: 'alice@example.com' },
    { name: 'Bob', age: 25, email: 'bob@example.com' },
    { name: 'Charlie', age: 35, email: 'charlie@example.com' },
  ],
  columns: [
    { key: 'name', label: 'Name', type: 'string', sortable: true },
    { key: 'age', label: 'Age', type: 'number', sortable: true },
    { key: 'email', label: 'Email', type: 'string', sortable: true },
  ],
})

Done. You have sorting, search, pagination, and page size control. No extra setup.

Using it with frameworks

Since it's just a JS class that mounts to a DOM element, it works in any framework. Here's the pattern:

React:

jsx

useEffect(() => {
  const table = DataTable.create({ el: ref.current, ... })
  return () => table.destroy()
}, [])

Vue:

onMounted(() => {
  table = DataTable.create({ el: el.value, ... })
})
onUnmounted(() => table.destroy())

Svelte:

onMount(() => {
  const table = DataTable.create({ el: container, ... })
  return () => table.destroy()
})

Vanilla JS / HTMX / Alpine / whatever: Just call DataTable.create(). You don't need a framework.

Try it live

Here's a full table with 50 rows, search, column filters, sorting, and pagination. Go ahead, click stuff:

What's next?

Frontend Mode — how client-side sorting, filtering, and pagination work under the hood
Backend Mode — let the server handle the data, the table just emits query strings
Column Types — strings, numbers, dates, and custom HTML columns
Styling — 4 layers of CSS customization, from quick theming to full Tailwind control

Getting Started ​

Install it ​

Import the CSS ​

Create a table ​

Using it with frameworks ​

Try it live ​

What's next? ​

Getting Started

Install it

Import the CSS

Create a table

Using it with frameworks

Try it live

What's next?