Vue-table-hooks

Hooks for building extendable tables for Vue 2 & 3.

Getting Started

Installation

For vue@3:

yarn add @vue-table-hooks/core

For vue@2 + @vue/composition-api

yarn add @vue-table-hooks/core @vue/composition-api

Usage

Create basic table:

// components/BasicTable.vue

import { defineComponent, h, PropType } from "vue";
import { Table } from "@vue-table-hooks/core";

export default defineComponent({
  name: "BasicTable",
  props: {
    table: {
      required: true,
      type: Object as PropType<Table>,
    },
  },
  setup(props) {
    return () =>
      h("table", props.table.props, [
        h(
          "thead",
          props.table.thead.props,
          props.table.thead.trs.map((tr) =>
            h(
              "tr",
              tr.props,
              tr.ths.map((th) => h("th", th.props, th.template))
            )
          )
        ),
        h(
          "tbody",
          props.table.tbody.props,
          props.table.tbody.trs.map((tr) =>
            h(
              "tr",
              tr.props,
              tr.tds.map((td) => h("td", td.props, td.template))
            )
          )
        ),
        h(
          "tfoot",
          props.table.tfoot.props,
          props.table.tfoot.trs.map((tr) =>
            h(
              "tr",
              tr.props,
              tr.tds.map((td) => h("td", td.props, td.template))
            )
          )
        ),
      ]);
  },
});

Create page:

<!-- views/HelloWorld.vue -->

<template>
  <basic-table :table="table" />
</template>

<script lang="ts">
  import { defineComponent } from "vue";
  import { useTable } from "@vue-table-hooks/core";
  import BasicTable from "components/BasicTable.vue";

  export default defineComponent({
    components: {
      BasicTable,
    },
    setup() {
      const table = useTable({
        data: [
          {
            id: 1,
            name: "Mike",
            age: 32,
            address: "10 Downing Street",
          },
          {
            id: 2,
            name: "John",
            age: 42,
            address: "10 Downing Street",
          },
        ],
        columns: [
          {
            headTitle: "Name",
            key: "name",
          },
          {
            headTitle: "Age",
            key: "age",
          },
          {
            headTitle: "Address",
            key: "address",
          },
        ],
        hooks: [usePagination()],
      });

      return { table };
    },
  });
</script>

Hooks

• [x] useSingleSelection
• [x] useMultipleSelection
• [x] usePagination
• [x] useSpan
• [ ] useFilter
• [x] useSortable (draggable, movable, reorderable)
• [x] useSorting
• [x] useSummary (total)
• [x] useTable
• [ ] useVirtualScroll