Vue 3 - DataTable

This package let you create a datatable component for Vue.js fully customizable. The <DataTable> component is used for displaying tabular data. Features include sorting, pagination, content-editing and style customization.

• Basic usage
• Properties
  • Columns
  • Rows
  • Options
• Slots

Basic usage

<script setup>
import { DataTable } from "@franzisker/datatable";
</script>

<template>
    <DataTable />
</template>

If you don't use any property, the table will render as shown in the image below.

Properties

Columns

| Name | Type | Default | Description | | -------- | ------- | ------- | ------------------------------------------------------------ | | label | String | -- | Set the <th> column name | | field | String | -- | Has to match with the field name used in the data-row object | | sortable | Boolean | false | Enable the sorting feature for the column |

Rows

<script setup>
// If we have a columns property like the following:
const columns = [
	{
		label: "#",
		field: "id",
	},
	{
		label: "Name",
		field: "name",
	},
	{
		label: "Email",
		field: "email",
	},
];

// Then we should populate our data with a rows property like the following:
const rows = [
	{ id: 1, name: "Ardenia", email: "[email protected]" },
	{ id: 2, name: "Hartley", email: "[email protected]" },
	{ id: 3, name: "Johny", email: "[email protected]" },
	{ id: 4, name: "Vikky", email: "[email protected]" },
	{ id: 5, name: "Connie", email: "[email protected]" },
];
</script>

<template>
    <DataTable :columns="columns" :rows="rows" />
</template>

This will render the following datatable:

Options

| Name | Type | Default | Description | | ------------- | ------ | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | title | String | "Heading title" | If not null, it renders a heading title on top of the datatable | | visibleBtns | Number | 5 | Changes the number of buttons that will be shown on the pagination button group relative to the current page | | rowCount | Number | 5 | Changes the default number of rows per page shown (it's recommended that this option already exist in the rowCountItems array option) | | rowCountItems | Array | [5, 10, 25, 50] | Change the items that will be shown in the row count select and will filter the rows per page | | classes | Object | Classes | Object that contains useful attributes to apply classes to the different elements of the datatable DOM. Below are all of the available attributes and their default values. |

Classes

If you want to use this responsive light/dark style you can import it via the next file:

import "@franzisker/datatable/dist/style.css";

By default, this style use WindiCSS classes with Vite integration. If you want the default classes to display a premade styled interface and have many other utilities go to WindiCSS and configure your project to use it.

Here are the default classes used to build this layouts, but you can always override it to use your own styles:

.vdt-container {
	@apply font-sans rounded shadow border border-gray-200 bg-white dark:(text-white bg-dark-600 border-gray-600);

	.vdt-header {
		@apply px-4 py-2 text-xl;
	}

	.vdt-content {
		@apply overflow-x-auto;

		table {
			@apply w-full text-left;

			thead {
				.vdt-sort-button {
					@apply w-full;
					.vdt-sort-container {
						@apply flex items-center justify-start space-x-2;
					}
				}
				.vdt-title {
					@apply text-base font-bold;
				}
			}

			tr {
				@apply border-b border-gray-200;

				th,
				td {
					@apply px-4 py-2;
				}
			}

			.vdt-table-empty {
				@apply px-4 py-2 text-gray-400;
			}
		}
	}

	.vdt-footer {
		@apply grid grid-cols-2;

		.vdt-row-count {
			@apply col-span-2 md:(col-span-1 justify-self-start) px-4 py-2 justify-self-center self-center;

			.vdt-label {
				@apply text-sm mr-2;
			}

			.vdt-select {
				@apply pl-2 pr-8 text-sm rounded border-2 border-gray-200 dark:(text-white bg-dark-600 border-gray-600);
			}
		}

		.vdt-pagination {
			@apply col-span-2 md:(col-span-1 justify-end) flex justify-center;

			.vdt-group-btn {
				@apply rounded text-blue-400 m-4 ring-2 inline-flex;

				.vdt-page-btn {
					@apply w-8 h-8 flex items-center justify-center hover:(bg-blue-400 text-white);
				}
				.vdt-active-btn {
					@apply bg-blue-400 text-white;
				}
				.vdt-prev-btn {
					@apply rounded-l;
				}
				.vdt-next-btn {
					@apply rounded-r;
				}
			}
		}
	}
}

Slots

We are using this data to show how to use the slots:

<script setup>
// If we have a columns property like the following:
const columns = [
	{
		label: "#",
		field: "id",
	},
	{
		label: "Name",
		field: "name",
	},
	{
		label: "Email",
		field: "email",
	},
];

// Then we should populate our data with a rows property like the following:
const rows = [
	{ id: 1, name: "Ardenia", email: "[email protected]" },
	{ id: 2, name: "Hartley", email: "[email protected]" },
	{ id: 3, name: "Johny", email: "[email protected]" },
	{ id: 4, name: "Vikky", email: "[email protected]" },
	{ id: 5, name: "Connie", email: "[email protected]" },
];
</script>

Heading

This slot is inside the <th> elements and have the next properties: | Name | Type | Description | | --------------- | -------- | ------------------------------------------------------------ | | setSort | function | It has two string params (field, direction), the first is the field of the column you want to sort and the second is the direction you want to sort | | getNewDirection | function | Returns the next direction value based on the current direction in order (null -> 'asc' -> 'desc' -> null ...) | | sortField | String | Returns the current sort field or null if no sort is defined | | sortDir | String | Returns the current sort direction or null if no sort is defined | | column | String | Has all the column props that you define in the parent component |

Item

This slot is inside the <td> elements and have the next properties: | Name | Type | Description | | --------------- | -------- | ------------------------------------------------------------ | | row | Object | Has the row data that you definde in the parent component for this row | | col | Object | Has the column props that you definde in the parent component for this row |

Pagination

In construction...

Row count

In construction...