Custom Cells and Filter Logic

This example uses DOM-node cell rendering, custom column search, and richer metadata formatting.

Library setup

Custom rendering works by returning DOM nodes and optional per-column filter logic.

<link rel="stylesheet" href="../src/data-table.css" />

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

  const table = new DogTable("#app", {
    pageSize: 6,
    remote: {
      url: "https://api.rahmaanms.my.id/api/employees",
      mapResponse(payload, state) {
        // ... filtering and pagination logic ...
      }
    },
    columns: [
      { key: "id", label: "ID" },
      {
        key: "name",
        label: "Employee",
        render(value, row) {
          return makeOwner(value, row);
        }
      },
      {
        key: "status",
        label: "Status",
        render(value) {
          return makeStatus(value);
        }
      }
    ]
  });

  table.init();
</script>