svelte-data-tabu

svelte-data-tabu

A simple, small, light-weight but powerful data table in svelte.

Usage

Config

export const config = {
  no: {
    name: "name", // head column
    type: "number", // number, string -> will align in different way
    formatter: (t) => `#${t}`, // how to format data
    hideMobile: true, // hide in mobile (will deprecate probably)
  },
  name: {
    name: "FISH",
    type: "text",
    align: "left", // text align
    className: "fishName", // custom class name
  },
  price: {
    name: "價格",
    sortable: true, // sortable in table head
    formatter: function priceFormatter(t) {
      return formatNumber(t);
    },
    comparator: priceComparator, // when sortable is ture, comparator is required.
  },
  price08: {
    accessor: (d) => d.price, // a function to define how to get data in this column
  },
};

TODOs

• [ ] pagination support
• [x] Fixed header
• [x] sortable
• [ ] slot
• [ ] expanded view
• [ ] group
• [ ] row and column event handler
• [ ] selectable
• [ ] Event communication
• [ ] a11y support
• [ ] test
• [ ] TypeScript support