MazTable
MazTable is designed to be a reusable data table with advanced features. Pagination, Search, Column Sorting, Row Selection, UI options, Loading and Slots.
INFO
Before you have to import the global css files in your project, follow instructions in Getting Started
Key Features
- Pagination (prop
pagination)- The component supports pagination with buttons to go to the first, previous, next, and last page.
- You can display only the pagination elements (input and buttons) and make API calls to your server to get elements by using the prop
paginationwithno-paginate-rows.
- Search (prop
search): It includes a search feature with a search bar where users can enter a query to filter displayed data. You can choose the column where the search will be activated. - Column Sorting (prop:
sortable): Columns are sortable, indicated by arrow icons. Sorting can be activated by clicking on the column header. - Row Selection (prop
select-value="key"): There is a dedicated column for selection with a checkbox for each row. Users can individually or collectively select/deselect rows. - Customizable Page Size: Users can choose the number of items to display per page using a dropdown list.
- Loading Indicator (prop
loading): A loading indicator (MazLoadingBar) is displayed when data is being loaded.
Available models
- v-model:
(string | boolean | number)[] | undefined(list of selected key) - v-model:search-query:
string | undefined - v-model:page:
number - v-model:page-size:
number
Basic usage
You can use MazTable and his child component to build a simple table and enjoy the style.
| # | Lastname | Firstname | Age |
|---|---|---|---|
| 1 | John | Doe | 99 |
| 2 | Doe | John | 30 |
Advanced
You can also provide all your data, the table is auto-generated and you can use the features listed on top
v-model="[ "0262672d-7c7a-4d30-866e-edb88b5a5336" ]"
v-model:search-query="undefined"
v-model:page="1"
v-model:page-size="10"
| # | Name | Code | Type | Area | Actions | |
|---|---|---|---|---|---|---|
| 1 |  | CL | CUP | Europe | ||
| 2 | | PL | LEAGUE | England | ||
| 3 | | SA | LEAGUE | Italy | ||
| 4 | | WC | CUP | World | ||
| 5 | | PPL | LEAGUE | Portugal | ||
| 6 | | PD | LEAGUE | Spain | ||
| 7 | | FL1 | LEAGUE | France | ||
| 8 | | EC | CUP | Europe | ||
| 9 | | DED | LEAGUE | Netherlands | ||
| 10 | | ELC | LEAGUE | England |
Loading
Enable the loading state with the prop loading
| # | Lastname | Firstname | Age |
|---|---|---|---|
| 1 | John | Doe | 99 |
| 2 | Doe | John | 33 |
| 3 | Max | Simth | 66 |
Sizing
Available sizes: 'mini' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
| # | Lastname | Firstname | Age |
|---|---|---|---|
| 1 | John | Doe | 99 |
| # | Lastname | Firstname | Age |
|---|---|---|---|
| 1 | John | Doe | 99 |
| # | Lastname | Firstname | Age |
|---|---|---|---|
| 1 | John | Doe | 99 |
Types
Property row
The rows property is an array of Row: type Rows = Row[]
type Row = Record<string, any> & {
selected?: boolean
action?: (row: Row) => unknown
classes?: HTMLAttributes['class']
}Property headers
The headers property has type: type Headers = string | HeadersEnriched[]
type HeadersEnriched = {
label: string
key?: string
sortable?: boolean
hidden?: boolean
srOnly?: boolean
width?: string
maxWidth?: string
classes?: ThHTMLAttributes['class']
scope?: ThHTMLAttributes['scope']
align?: ThHTMLAttributes['align']
rowspan?: ThHTMLAttributes['rowspan']
colspan?: ThHTMLAttributes['colspan']
headers?: ThHTMLAttributes['headers']
}