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

1. 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 pagination with no-paginate-rows.
2. 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.
3. Column Sorting (prop: sortable): Columns are sortable, indicated by arrow icons. Sorting can be activated by clicking on the column header.
4. 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.
5. Customizable Page Size: Users can choose the number of items to display per page using a dropdown list.
6. 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

View code

<template>
  <MazTable size="sm" :headers="['#', 'Lastname', 'Firstname', 'Age']">
    <MazTableRow>
      <MazTableCell>
        1
      </MazTableCell>
      <MazTableCell>
        John
      </MazTableCell>
      <MazTableCell>
        Doe
      </MazTableCell>
      <MazTableCell>
        99
      </MazTableCell>
    </MazTableRow>
    <MazTableRow>
      <MazTableCell>
        2
      </MazTableCell>
      <MazTableCell>
        Doe
      </MazTableCell>
      <MazTableCell>
        John
      </MazTableCell>
      <MazTableCell>
        30
      </MazTableCell>
    </MazTableRow>
  </MazTable>
</template>

<script lang="ts" setup>
  import MazTable from 'maz-ui/components/MazTable'
  import MazTableRow from 'maz-ui/components/MazTableRow'
  import MazTableCell from 'maz-ui/components/MazTableCell'
</script>

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"

Competitions

	#	Name	Code	Type	Area	Actions
	1	UEFA Champions League	CL	CUP	Europe
	2	Premier League	PL	LEAGUE	England
	3	Serie A	SA	LEAGUE	Italy
	4	FIFA World Cup	WC	CUP	World
	5	Primeira Liga	PPL	LEAGUE	Portugal
	6	Primera Division	PD	LEAGUE	Spain
	7	Ligue 1	FL1	LEAGUE	France
	8	European Championship	EC	CUP	Europe
	9	Eredivisie	DED	LEAGUE	Netherlands
	10	Championship	ELC	LEAGUE	England

Item per page

1 - 10 of 2

View code

<template>
  <MazTable
    size="sm"
    v-model="selectedIds"
    v-model:search-query="searchQuery"
    v-model:page="page"
    v-model:page-size="pageSize"
    search
    pagination
    color="secondary"
    sortable
    selectable
    hoverable
    background-even
    selected-key="id"
    :headers="[
      { label:'#', key: 'index', align: 'center', width: '2rem', sortable: false },
      { label:'Name', key: 'name' },
      { label: 'Code', key: 'code', align: 'center'  },
      { label: 'Type', key: 'type' },
      { label: 'Area', key: 'areaName', align: 'center', classes: 'maz-font-bold' },
    ]"
    :rows="competitions"
  >
    <template #cell-index="{ value }">
      <span class="maz-text-base">{{value}}</span>
    </template>
    <template #cell-name="{ row, value }">
      <div class="maz-flex maz-items-center maz-gap-2">
        <MazAvatar :src="row.logoUrl" size="0.5rem"></MazAvatar>
        <span>{{value}}</span>
      </div>
    </template>
    <template #cell-type="{ value }">
      <MazBadge :color="value === 'CUP' ? 'primary' : 'secondary'">{{value}}</MazBadge>
    </template>

    <template #actions>
      <MazBtn fab size="xs" color="danger" icon="trash" />
    </template>
  </MazTable>
</template>

<script lang="ts">
  import MazTable from 'maz-ui/components/MazTable'

  const competitions = [
  {
    id: '0262672d-7c7a-4d30-866e-edb88b5a5336',
    name: 'UEFA Champions League',
    code: 'CL',
    type: 'CUP',
    areaName: 'Europe',
    matchday: 6,
    logoUrl: 'https://crests.football-data.org/CL.png',
    groups: 1,
    index: 1,
  },
  {
    id: '08d15e97-a319-4772-9b82-f1877369b40f',
    name: 'Premier League',
    code: 'PL',
    type: 'LEAGUE',
    areaName: 'England',
    matchday: 18,
    logoUrl: 'https://crests.football-data.org/PL.png',
    groups: 1,
    index: 2,
  },
  {
    id: '17e62396-bbcb-42f5-acff-caed11534976',
    name: 'Serie A',
    code: 'SA',
    type: 'LEAGUE',
    areaName: 'Italy',
    matchday: 17,
    logoUrl: 'https://crests.football-data.org/SA.png',
    groups: 0,
    index: 3,
  },
  {
    id: '3726264e-ba3a-4a9f-b4a4-8fc33e12747c',
    name: 'FIFA World Cup',
    code: 'WC',
    type: 'CUP',
    areaName: 'World',
    matchday: 8,
    logoUrl: 'https://crests.football-data.org/qatar.png',
    groups: 1,
    index: 4,
  },
  {
    id: '555dc3f4-e592-46af-b634-59f07a201f2e',
    name: 'Primeira Liga',
    code: 'PPL',
    type: 'LEAGUE',
    areaName: 'Portugal',
    matchday: 15,
    logoUrl: 'https://crests.football-data.org/PPL.png',
    groups: 0,
    index: 5,
  },
  {
    id: '59bbdfa0-86d8-4a74-b701-435747c55a42',
    name: 'Primera Division',
    code: 'PD',
    type: 'LEAGUE',
    areaName: 'Spain',
    matchday: 18,
    logoUrl: 'https://crests.football-data.org/PD.png',
    groups: 1,
    index: 6,
  },
  {
    id: '6ae53332-3d27-4781-912d-d9c4e69657f9',
    name: 'Ligue 1',
    code: 'FL1',
    type: 'LEAGUE',
    areaName: 'France',
    matchday: 17,
    logoUrl: 'https://crests.football-data.org/FL1.png',
    groups: 4,
    index: 7,
  },
  {
    id: '747c79ee-89c8-436a-b0ea-53f05f180007',
    name: 'European Championship',
    code: 'EC',
    type: 'CUP',
    areaName: 'Europe',
    matchday: 1,
    logoUrl: 'https://crests.football-data.org/EUR.svg',
    groups: 1,
    index: 8,
  },
  {
    id: '7a32d897-6b22-4212-8ffe-049ae912c346',
    name: 'Eredivisie',
    code: 'DED',
    type: 'LEAGUE',
    areaName: 'Netherlands',
    matchday: 18,
    logoUrl: 'https://crests.football-data.org/ED.png',
    groups: 0,
    index: 9,
  },
  {
    id: 'ab57e2dc-272c-45e6-b13e-57617a13b753',
    name: 'Championship',
    code: 'ELC',
    type: 'LEAGUE',
    areaName: 'England',
    matchday: 23,
    logoUrl: 'https://crests.football-data.org/ELC.png',
    groups: 0,
    index: 10,
  },
  {
    id: 'b84e3295-7315-46c7-b979-6d9d784e5460',
    name: 'Campeonato Brasileiro Série A',
    code: 'BSA',
    type: 'LEAGUE',
    areaName: 'Brazil',
    matchday: 38,
    logoUrl: 'https://crests.football-data.org/764.svg',
    groups: 0,
    index: 11,
  },
  {
    id: 'cafad3ce-1783-4652-9248-4bcad024dd98',
    name: 'Copa Libertadores',
    code: 'CLI',
    type: 'CUP',
    areaName: 'South America',
    matchday: 11,
    logoUrl: 'https://crests.football-data.org/CLI.svg',
    groups: 0,
    index: 12,
  },
  {
    id: 'ed945bea-9a58-450a-8d62-7baa7722b5e7',
    name: 'Bundesliga',
    code: 'BL1',
    type: 'LEAGUE',
    areaName: 'Germany',
    matchday: 16,
    logoUrl: 'https://crests.football-data.org/BL1.png',
    groups: 0,
    index: 13,
  },
]

</script>

Loading

Enable the loading state with the prop loading

#	Lastname	Firstname	Age
1	John	Doe	99
2	Doe	John	33
3	Max	Simth	66

<MazTable loading="true" :headers="['#', 'Lastname', 'Firstname', 'Age']">
  ...
</MazTable>

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

<MazTable size="xs" :headers="['#', 'Lastname', 'Firstname', 'Age']">
  ...
</MazTable>
<MazTable size="md" :headers="['#', 'Lastname', 'Firstname', 'Age']">
  ...
</MazTable>
<MazTable size="lg" :headers="['#', 'Lastname', 'Firstname', 'Age']">
  ...
</MazTable>

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']
}

Props & Events emitted

MazTable

Props, Event & Slots

Props

Prop name	Description	Type	Values	Default
tableClass	class of the table element	TSIndexedAccessType	-	undefined
tableStyle	style of the table element	StyleValue	-	undefined
modelValue	v-model of the table - list of selected rows	Array	-	undefined
size	size of the table @values 'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'mini'	Size	-	'md'
title	title of the table	string	-	undefined
headers	headers of the table	Array	-	undefined
sortable	allow sort feature to all columns	boolean	-
headersAlign	align all headers	TSIndexedAccessType	-	'left'
rows	rows of the table - type: Record<string, string | boolean | number>[] ;	Array	-	undefined
hoverable	add hover effect on rows	boolean	-
search	enable search feature into the table header	boolean	-
noSearchInRow	disabled search in rows - useful to filtering data yourself or make search request to server	boolean	-
searchPlaceholder	placeholder of the search input	string	-	'Search'
noSearchBy	Disabled search by column (remove select input "search by")	boolean	-
searchByPlaceholder	placeholder of the search by select	string	-	'Search by'
searchByAllLabel	label of the search by of all options	string	-	'All'
searchQuery	search query in input	string	-	undefined
backgroundOdd	add background color to odd rows	boolean	-
backgroundEven	add background color to even rows	boolean	-
elevation	add shodow to the table	boolean	-
divider	no divider between rows	boolean	-
caption	caption of the table	string	-	undefined
captionSide	caption side @values 'top' | 'bottom'	union	-	'bottom'
pagination	add pagination into the table footer	boolean	-
page	current page of pagination	number	-	1
pageSize	number of items per page	number	-	20
totalPages	pages count	number	-	undefined
paginationAllLabel	label of the pagination all option	string	-	'All'
noPaginateRows	no paginate rows - useful to make paginate request with your server	boolean	-
totalItems	total number of items	number	-	undefined
loading	loading state	boolean	-
selectable	Enable selection of rows	boolean	-
selectedKey	Enable selection of rows - key of the selected row	string	-	undefined
tableLayout	table layout @values 'auto' | 'fixed'	union	-	undefined
color	color of the loading bar	Color	-	'primary'

Events

Event name	Properties	Description
update:model-value	value (Row | string | number | boolean)[] - list of selected rows (if selectedKey is defined, it will be the value of the selectedKey of the row)	emitted when a row is selected
update:search-query	searchQuery string - search query	emitted when enter a value in the search input
update:page	page number - current page	emitted when the current page of the pagination change
update:page-size	pageSize number - current page size	emitted when the page size of the pagination change

Slots

Name	Description	Bindings
title
caption	add caption on top or bottom of the table
thead	content in thead element
header	replace column header	header Object - header data label String - header label
header-label-	replace column header label	header Object - header data label String - header label
actions-header	replace text of actions header
default
select	replace checkbox component	row Object - row data selected Boolean - if selected or not
cell	replace all row cells	row Object - row data value Boolean - cell value
cell-	replace row cells of column	row Object - row data value Boolean - cell value
actions	will add actions column	row Object - row data
no-results	replace no results
no-results-text	replace no results test only

MazTableCell

Props & Slots

Slots

Name	Description	Bindings
default

MazTableRow

Props & Slots

Props

Prop name	Description	Type	Values	Default
noHoverable	Override hoverable of table props	boolean	-

Slots

Name	Description	Bindings
default

MazTableTitle

Props & Slots

Slots

Name	Description	Bindings
default