data-table

Advanced data table with filtering, sorting, pagination, and URL persistence.

<data-table
    :columns="columns"
    :data="products"
    :total-rows="total"
    :options="{ showSelection: true, globalSearch: true }"
    @change-query="loadData"
/>

Key Features:

• Column-based filtering (multi-select, single-select, boolean, date, search)

• Multi-column sorting

• URL query parameter persistence

• Row selection and bulk actions

• Expandable rows

• Global search

• Configurable pagination

Props:

• columns (Array) - Column definitions with filters, sorting, rendering

• data (Array) - Table data

• totalRows (Number) - Total record count for pagination

• options (Object) - Configuration object

• isLoading (Boolean) - Loading state

• perPage (Number) - Rows per page (default: 10)

• compact (Boolean) - Compact display mode

• urlQueryParams (Object) - Additional URL parameters

Events:

• change-query - Emitted when criteria changes (filters, sorting, pagination)

• select-row - Row selection change

• change-page - Page navigation

• change-filter - Filter modification

• change-sort - Sort order change