Vue-beercss-table NPM

vue-beercss-table

A Vue.js component that provides a customizable table with support for selectable rows and sorting. Built using Vue 3 and BeerCSS.

Installation

npm install vue-beercss-table

Add the following lines to your main.js or app.js file to include BeerCSS and Material Dynamic Colors:

import 'beercss'
import 'material-dynamic-colors'

Usage

Here's how to use the VueBeercssTable component in your Vue.js application:

<template>
  <vue-beercss-table
    :columns="columns"
    :rows="rows"
    :selection="selectionMode"
    :flat="isFlat"
    @sort="handleSort"
  >
    <template v-slot:header>
      <h1>Table Header</h1>
    </template>

    <template v-slot:footer>
      <div>Table Footer</div>
    </template>
  </vue-beercss-table>
</template>

<script setup>
import { ref } from 'vue';
import VueBeercssTable from 'vue-beercss-table';

const columns = ref([
  { name: 'name', label: 'Name', field: 'name', sortable: true, class: 'text-center', headerClass: 'header-highlight' },
  { name: 'age', label: 'Age', field: 'age', sortable: true, class: 'text-right', headerClass: 'header-age' },
]);

const rows = ref([
  { id: 1, name: 'João da Silva', age: 30 },
  { id: 2, name: 'Maria Ribeiro', age: 25 },
]);

const selectionMode = ref('multiple'); // 'none', 'single', or 'multiple'
const isFlat = ref(false);

function handleSort(column) {
  console.log('Sorting by:', column);
}
</script>

Props

The VueBeercssTable component accepts the following props:

columns (Array):

Array of column definitions. Each column object should include:

name (String): Unique identifier for the column.
label (String): Display name for the column header.
field (String): The property name in each row object to display in this column.
sortable (Boolean, optional): Indicates whether the column is sortable. Defaults to false.
class (String, optional): CSS class name(s) to apply to the column's cells. This allows for custom styling of the column's content.
headerClass (String, optional): CSS class name(s) to apply to the column's - header cell. This allows for custom styling of the column's header.