Formatter Engine

Transforming raw data into human-readable formats using the native Intl API.

Library setup

Formatting is configured directly on each column with type, currency, locale, and format.

const table = new DogTable("#app", {
  pageSize: 5,
  remote: {
    url: "https://api.rahmaanms.my.id/api/employees",
    mapResponse: (payload, state) => { /* ... */ }
  },
  columns: [
    { key: "name", label: "Employee" },
    {
      key: "joinDate",
      label: "Joined",
      type: "datetime",
      format: { dateStyle: "long" },
    },
    {
      key: "salary",
      label: "Salary (USD)",
      type: "money",
      currency: "USD",
    },
    {
      key: "salary",
      label: "Salary (IDR)",
      type: "money",
      currency: "IDR",
      locale: "id-ID",
    },
  ],
});

Configuration Used

Notice how type: 'money' and type: 'datetime' handle the complexity of localization automatically. 

columns: [
  { key: "name", label: "Employee" },
  {
    key: "joinDate",
    label: "Joined",
    type: "datetime",
    format: { dateStyle: "long" },
  },
  {
    key: "salary",
    label: "Salary (USD)",
    type: "money",
    currency: "USD",
  },
  {
    key: "salary",
    label: "Salary (IDR)",
    type: "money",
    currency: "IDR",
    locale: "id-ID",
  },
]