Table

Tier 0: Zero-JS

Responsive clean data table styling

Installation

$npx nnui add table

copy

Interactive Preview & Code

Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00

<div data-part="table-container">
  <table data-ui="table">
    <thead>
      <tr>
        <th>Invoice</th>
        <th>Status</th>
        <th>Method</th>
        <th style="text-align: right;">Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td style="font-weight: 600;">INV001</td>
        <td><span data-ui="badge" data-variant="success">Paid</span></td>
        <td>Credit Card</td>
        <td style="text-align: right;">$250.00</td>
      </tr>
    </tbody>
  </table>
</div>

import React, { useState } from 'react';
import 'nnui-kit'; // Registers universal Light-DOM elements

export default function TableDemo() {
  const [tab, setTab] = useState('all');
  const [val, setVal] = useState(50);
  const [selected, setSelected] = useState('');
  const [query, setQuery] = useState('');

  return (
    <div data-part="table-container">
      <table data-ui="table">
        <thead>
          <tr>
            <th>Invoice</th>
            <th>Status</th>
            <th>Method</th>
            <th style="text-align: right;">Amount</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td style="font-weight: 600;">INV001</td>
            <td><span data-ui="badge" data-variant="success">Paid</span></td>
            <td>Credit Card</td>
            <td style="text-align: right;">$250.00</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}

<script setup>
import { ref } from 'vue';
import 'nnui-kit'; // Registers universal Light-DOM elements

const activeTab = ref('all');
const sliderValue = ref(50);
const selected = ref('');
const query = ref('');

const handleSelect = (val) => {
  console.log('Selected:', val);
};
</script>

<template>
  <div data-part="table-container">
    <table data-ui="table">
      <thead>
        <tr>
          <th>Invoice</th>
          <th>Status</th>
          <th>Method</th>
          <th style="text-align: right;">Amount</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td style="font-weight: 600;">INV001</td>
          <td><span data-ui="badge" data-variant="success">Paid</span></td>
          <td>Credit Card</td>
          <td style="text-align: right;">$250.00</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
  import 'nnui-kit';

  let activeTab = $state('all');
  let sliderValue = $state(50);
  let selected = $state('');
</script>

<div data-part="table-container">
  <table data-ui="table">
    <thead>
      <tr>
        <th>Invoice</th>
        <th>Status</th>
        <th>Method</th>
        <th style="text-align: right;">Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td style="font-weight: 600;">INV001</td>
        <td><span data-ui="badge" data-variant="success">Paid</span></td>
        <td>Credit Card</td>
        <td style="text-align: right;">$250.00</td>
      </tr>
    </tbody>
  </table>
</div>

How to Utilize

NNUI-KIT components live directly in the document Light DOM. You can use them via declarative HTML, with our first-class React wrapper, or platform-natively in Svelte, Vue, Astro, and HTMX:

React 18 & 19 (Next.js 15 App Router)

import 'nnui-kit/css';
import 'nnui-kit/client';
import { Table } from 'nnui-kit/react';

Universal Web Components (Vue 3, Svelte 5, Astro, HTMX)

<!-- Automatically registers <ui-table> and <nnui-table> -->
import 'nnui-kit/css';
import 'nnui-kit/client';

Platform Features

Zero Shadow DOM

Element lives in the Light DOM. Tailwind and global CSS apply directly.

persist="url | local"

Add declarative persistence attribute to auto-sync state with URL search params.

sync="cross-tab"

Synchronize changes across all open browser tabs via BroadcastChannel.