Theme Presets

Switch the active class mapping to preview the `default`, `bootstrap`, and `tailwind` presets.

Library setup

Use the core stylesheet, then load whichever framework CSS you want to target before calling theme.

<link rel="stylesheet" href="../src/data-table.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

<script type="module">
  import { DogTable } from "../src/data-table.js";

  const table = new DogTable("#app", {
    data: dogs,
    theme: "bootstrap",
    columns: [
      { key: "name", label: "Name" },
      { key: "fee", label: "Adoption Fee" },
    ],
  });

  table.init();
</script>