@franzisker/datatable v1.1.17

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

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: "anezey0@xing.com" },
	{ id: 2, name: "Hartley", email: "hpollard1@wikispaces.com" },
	{ id: 3, name: "Johny", email: "jmorman2@jugem.jp" },
	{ id: 4, name: "Vikky", email: "vgallone3@slate.com" },
	{ id: 5, name: "Connie", email: "cdoud4@berkeley.edu" },
];
</script>

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

This will render the following datatable:

Options

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: "anezey0@xing.com" },
	{ id: 2, name: "Hartley", email: "hpollard1@wikispaces.com" },
	{ id: 3, name: "Johny", email: "jmorman2@jugem.jp" },
	{ id: 4, name: "Vikky", email: "vgallone3@slate.com" },
	{ id: 5, name: "Connie", email: "cdoud4@berkeley.edu" },
];
</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...