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

Last updated

Was this helpful?