Vue Table Component

This document provides developer documentation for the Vue Table component, which is inspired by the Angular Material Table component.

Introduction

The Vue Table component provides a flexible and powerful way to display data in a tabular format. It is built with a template-based approach, similar to Angular mat-table, allowing for a declarative and customizable table structure.

The core of the component is the <EaTable> which acts as a container for the table definition. The table's columns, headers, rows, and footers are defined using a set of specialized components.

Key Features

• Declarative API: Define table structure using Vue templates.
• Customizable Columns: Easily define and customize columns.
• Typed: All components are strongly typed with TypeScript.
• Composable: Built with the Vue Composition API.

Component API

Component Naming

When using this library as a plugin, all components are registered globally. This means you can use them directly in your templates without any extra imports. Vue allows you to use either PascalCase (e.g., <EaTable>) or kebab-case (e.g., <ea-table>) for component tags. The examples in this documentation use PascalCase, but both styles are fully supported.

As a result of the plugin registration, the following components are available globally:

| PascalCase | kebab-case | | --------------- | ----------------- | | <EaTable> | <ea-table> | | <EaColumnDef> | <ea-column-def> | | <EaColumnText> | <ea-column-text> | | <EaHeader> | <ea-header> | | <EaCell> | <ea-cell> | | <EaFooter> | <ea-footer> | | <EaRowHeader> | <ea-row-header> | | <EaRowCell> | <ea-row-cell> | | <EaRowFooter> | <ea-row-footer> |

Tags

<EaTable>

The main container for the table.

Props:

• dataSource: T[]: An array of data objects to render in the table.

Slots:

• default: Used to define the table's columns and rows.

<EaColumnDef>

Defines a column in the table.

Props:

• name: string: A unique name for the column.

Slots:

• default: Used to define the header, cell, and footer for this column.

<EaColumnText>

A convenience component for defining a simple text-based column.

Props:

• name: string: A unique name for the column.
• displayText?: string: The text to display in the header. Defaults to name.
• value?: string: The property name to access on the data object for the cell value. Defaults to name.
• includesFooter?: boolean: Whether to include a footer for this column.

<EaHeader>

Defines the header for a column.

<EaCell>

Defines the cell for a column.

Slots:

• default: Receives the row data as data.

<EaFooter>

Defines the footer for a column.

<EaRowHeader>

Defines a header row. The content of the row is determined by the columns prop.

Props:

• columns: string[]: An array of column names to include in this row.
• autofill?: boolean: If true (default), it will automatically fill any missing cells with empty <th> elements.

<EaRowCell>

Defines a data row. The content of the row is determined by the columns prop.

Props:

• columns: string[]: An array of column names to include in this row.

<EaRowFooter>

Defines a footer row. The content of the row is determined by the columns prop.

Props:

• columns: string[]: An array of column names to include in this row.
• autofill?: boolean: If true (default), it will automatically fill any missing cells with empty <td> elements.

Usage Example

Basic Table

Here is an example of a basic table with three columns: id, name, and description.

<template>
  <EaTable :data-source="myData">
    <EaColumnText name="id" />
    <EaColumnText name="name" />
    <EaColumnText name="description" />

    <EaRowHeader :columns="['id', 'name', 'description']" />
    <EaRowCell :columns="['id', 'name', 'description']" />
    <EaRowFooter :columns="['id', 'name', 'description']" />
  </EaTable>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { EaTable, EaColumnText, EaRowHeader, EaRowCell, EaRowFooter } from '@ea-vue/table'

const myData = ref([
  { id: 1, name: 'Item 1', description: 'Description 1' },
  { id: 2, name: 'Item 2', description: 'Description 2' },
]);
</script>

Table with Custom Columns

This example demonstrates how to create a table with custom templates for the header and cell of a column.

<template>
  <EaTable :data-source="myData">
    <EaColumnDef name="action">
      <EaHeader>
        Action
      </EaHeader>
      <EaCell v-slot="{ data }">
        <button @click="doSomething(data)">Click Me</button>
      </EaCell>
    </EaColumnDef>

    <EaColumnText name="id" />
    <EaColumnText name="name" />

    <EaRowHeader :columns="['id', 'name', 'action']" />
    <EaRowCell :columns="['id', 'name', 'action']" />
  </EaTable>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { EaTable, EaColumnDef, EaCell, EaHeader, EaColumnText, EaRowHeader, EaRowCell } from '@ea-vue/table'

const myData = ref([
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
]);

function doSomething(data: any) {
  alert(`Clicked on item with ID: ${data.id}`);
}
</script>

Advanced Table

This example showcases more advanced features like colspan, multiple header rows, and custom footers.

<template>
  <EaTable :data-source="myData" style="width: 100%; border-collapse: collapse;">
    <EaColumnDef name="id">
      <EaHeader>Id</EaHeader>
      <EaHeader selector="info" colspan="4">Info</EaHeader>
      <EaCell v-slot="{ data }">{{ data.id }}</EaCell>
      <EaFooter colspan="4"></EaFooter>
    </EaColumnDef>

    <EaColumnDef name="name">
      <EaHeader>Name</EaHeader>
      <EaCell v-slot="{ data }">{{ data.name }}</EaCell>
    </EaColumnDef>

    <EaColumnDef name="description">
      <EaHeader>Description</EaHeader>
      <EaCell v-slot="{ data }">{{ data.description }}</EaCell>
    </EaColumnDef>

    <EaColumnDef name="status">
      <EaHeader>Status</EaHeader>
      <EaCell v-slot="{ data }">{{ data.status }}</EaCell>
    </EaColumnDef>

    <EaColumnDef name="value">
      <EaHeader>Values</EaHeader>
      <EaHeader selector="info">Total</EaHeader>
      <EaCell v-slot="{ data }">{{ data.value }}</EaCell>
      <EaFooter>{{ total }}</EaFooter>
    </EaColumnDef>

    <EaRowHeader :columns="columns" selector="info" :autofill="false" style="background-color: #f2f2f2;" />
    <EaRowHeader :columns="columns" style="background-color: #f2f2f2;" />
    <EaRowCell :columns="columns"> </EaRowCell>
    <EaRowFooter :columns="columns" :autofill="false"></EaRowFooter>
  </EaTable>
</template>

<script setup lang="ts">
import { computed, reactive } from 'vue';
import { EaTable, EaRowHeader, EaRowCell, EaRowFooter, EaCell, EaFooter, EaColumnDef, EaHeader } from '@ea-vue/table';

const columns = ['id', 'name', 'description', 'status', 'value']

const myData = reactive([
  { id: 1, name: 'Item 1', description: 'Description 1', status: 'Active', value: 100000 },
  { id: 2, name: 'Item 2', description: 'Description 2', status: 'Inactive', value: 35000 },
]);

const total = computed(() => myData.reduce((acc, item) => acc + item.value, 0))
</script>

Installation

To install the package, you can use npm or yarn:

npm install @ea-vue/table
# or
yarn add @ea-vue/table

Using as a Plugin

This component library is designed to be used as a Vue plugin. The index.ts file in the components/table directory exports a plugin that registers all the necessary components globally.

To use the plugin, import it from your package and install it in your main application entry point (main.js or main.ts):

import { createApp } from 'vue';
import App from './App.vue';
import TablePlugin from '@ea-vue/table';

const app = createApp(App);

app.use(TablePlugin);

app.mount('#app');

Once the plugin is installed, you can use the table components in any of your Vue components without needing to import them individually.