Remote Data from Open API

Library setup

Remote mode only needs the core import plus a remote config that maps your API response.

<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) {
        const rows = Array.isArray(payload?.data) ? payload.data : [];
        const start = (state.currentPage - 1) * state.pageSize;
        return {
          rows: rows.slice(start, start + state.pageSize),
          totalItems: rows.length,
        };
      },
    },
    columns: [
      { key: "id", label: "ID" },
      { key: "avatar", label: "Avatar", type: "picture" },
      { key: "name", label: "Name" },
      { key: "email", label: "Email" },
      { key: "status", label: "Status" },
    ],
  });

  table.init();
</script>