Vue3 Datatable

To use the datatable, import the component and its CSS, then provide rows and columns props. You can enable features like sorting and column filtering via props.

<template>
    <vue3-datatable :rows="rows" :columns="cols" :sortable="true" :columnFilter="true"> </vue3-datatable>
</template>

<script setup lang="ts">
    import { ref } from "vue";
    import Vue3Datatable from "@bhplugin/vue3-datatable";
    import type { IColumnDefinition } from "@bhplugin/vue3-datatable";
    import "@bhplugin/vue3-datatable/dist/style.css";

    const cols = ref<IColumnDefinition[]>([
        { field: "id", title: "ID", isUnique: true, type: "number", filter: false },
        { field: "name", title: "Name" },
        { field: "email", title: "Email" },
        { field: "age", title: "Age", type: "number" },
        { field: "dob", title: "Date of Birth", type: "date" },
        { field: "isActive", title: "Active", type: "bool" },
        { field: "address.city", title: "City" },
    ]);

    const rows = ref<Array<Record<string, unknown>>>([
        { id: 1, name: "John Doe", email: "john@example.com", age: 28, dob: "1997-05-15", isActive: true, address: { city: "New York" } },
        { id: 2, name: "Jane Smith", email: "jane@example.com", age: 34, dob: "1991-11-22", isActive: false, address: { city: "London" } },
    ]);
</script>

To use vue3-datatable in server-side mode (where data fetching, sorting, and filtering are handled by your backend), set the :isServerMode="true" prop and listen to the relevant change events to trigger new API calls.

Key props for server mode:

• :isServerMode="true"
• :loading: Boolean to show loading state
• :totalRows: Total count of records on the server
• :pageSize: Current page size
• :sortable: Enable sorting
• :columnFilter: Enable column filtering

Required events to handle:

• @page-change
• @page-size-change
• @sort-change
• @filter-change
• @search-change
• @change-server (Aggregate event containing full state)

<vue3-datatable
    :rows="rows"
    :columns="cols"
    :loading="loading"
    :totalRows="totalRows"
    :isServerMode="true"
    :pageSize="10"
    :sortable="true"
    :columnFilter="true"
    @page-change="onPageChange"
    @page-size-change="onPageSizeOnSizeChange"
    @sort-change="onSortChange"
    @filter-change="onFilterChange"
    @search-change="onSearchChange"
/>

The vue3-datatable component emits several events to allow you to react to user interactions and state changes.

Event Reference

Event Rules

• Sorting: Applying a sort does not reset the current page.
• Resets: When a filter, search, or page size is changed, the table resets to page 1, but it only emits the specific event related to that change (it does not emit pageChange).
• Pagination: pageChange is only triggered by explicit user clicks on pagination buttons.
• Resetting: During a reset(), only the reset event (and changeServer if in server mode) is emitted; all other events are suppressed.

The <vue3-datatable> component accepts several props to control its behavior, appearance, and data handling. Key props include:

• columns (required): Array of IColumnDefinition objects.
• rows (required): Array of data records.
• isServerMode: Enables server-side mode (disables client-side sort/filter/pagination).
• totalRows: Required when isServerMode is true.
• skin: CSS classes for styling (bh-table-striped, bh-table-hover, bh-table-bordered, bh-table-compact).
• loading: Shows a loading overlay or skeleton.
• hasCheckbox: Enables a checkbox column for row selection.
• search: Global search string.
• page / pageSize: Controls pagination state.
• sortable: Enables column sorting.
• columnFilter: Enables per-column filter inputs.
• stickyHeader / height: Enables a sticky header with a specific scrollable height.
• selectRowOnClick: Toggles row selection when a row is clicked.

The IDataTableProps interface defines the configuration for the <vue3-datatable> component.

Core Data Props

• rows: Array of row data objects.
• columns: Array of IColumnDefinition objects.
• totalRows: Total row count (required in isServerMode).

Feature Toggles

• isServerMode: Enables server-side mode (disables client-side logic).
• sortable: Enables column sorting globally.
• columnFilter: Enables per-column filter inputs.
• pagination: Shows/hides the pagination area.
• hasCheckbox: Adds a checkbox column for row selection.
• stickyHeader: Makes the header stay visible during vertical scroll (requires height prop).
• stickyFirstColumn: Fixes the first column to the left during horizontal scroll.

Styling and Appearance

• skin: CSS skin (e.g., 'bh-table-striped', 'bh-table-hover', 'bh-table-bordered', 'bh-table-compact').
• loading: Shows a loading spinner overlay.
• rowClass / cellClass: CSS classes for rows/cells. Can be a string, array, or a function (row) => string.
• columnFilterLang: A Record for i18n of filter condition labels.

<vue3-datatable
    :rows="data"
    :columns="columns"
    :sortable="true"
    :pagination="true"
    :page-size="20"
    :has-checkbox="true"
    @sort-change="onSort"
    @page-change="onPage"
/>