@franzisker/datatable

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: "[e-mail]" },
	{ id: 2, name: "Hartley", email: "[e-mail]" },
	{ id: 3, name: "Johny", email: "[e-mail]" },
	{ id: 4, name: "Vikky", email: "[e-mail]" },
	{ id: 5, name: "Connie", email: "[e-mail]" },
];
</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: "[e-mail]" },
	{ id: 2, name: "Hartley", email: "[e-mail]" },
	{ id: 3, name: "Johny", email: "[e-mail]" },
	{ id: 4, name: "Vikky", email: "[e-mail]" },
	{ id: 5, name: "Connie", email: "[e-mail]" },
];
</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...