@psff/cmp-table NPM

@psff/cmp-table `psff-table`

PsffTable implements the most common html table tags.

Getting started

Setup the package as a dependency.
```
yarn add @psff/cmp-table
```

Use the component <psff-table />.

import PsffTable, { PsffTableSortInfo, PsffTableColumnInfo } from '@psff/cmp-table';

@Component({
  components: {
    PsffTable,
  },
})
export default class MyComponent extends Vue {
  public headers: PsffTableColumnInfo[][] = [[
    { id: 'name', label: 'Name', sortable: true, align: 'left' },
    { id: 'address', label: 'Address', sortable: false, align: 'left' },
    { id: 'city', label: 'City', sortable: true, align: 'left' },
    { id: 'company', label: 'Company', sortable: true, align: 'left' },
  ]];

  public items: string[][] = [
    ['a1', 'b1', 'c1', 'd1'],
    ['a2', 'b2', 'c2', 'd2'],
    ['a3', 'b3', 'c3', 'd3'],
    ['a4', 'b4', 'c4', 'd4'],
  ];

  public currentSort: PsffTableSortInfo = { key: 'name', direction: 'asc' };
}

.my-table {
  --psff-table-layout: normal;
  --psff-table-background: transparent;
}

<psff-table
  class="my-table"
  :headers="headers"
  :items="items"
  :current-sort="currentSort"
  @sort="currentSort = $event" />

Specifications

Models

PsffTableColumnInfo

{
  id: string;
  label: string;
  align?: 'left' | 'right' | 'center'; // Default left
  sortable?: boolean; // Default false
  highlight?: boolean; // Default false
  width?: string; // Default auto
  // Called on cell render to define the innerHTML of the cell
  template?: (value: any) => string;
  // Called after initial mount and after any render because of value changes
  onUpdated?: (value: any, element: Element) => void;
}

PsffTableSortInfo

{
  key: string;
  direction: 'asc' | 'desc';
}

PsffTableItemData: any[]

PsffTableItemInfo

{
  data: PsffTableItemData;
  clickable?: boolean; // Default false
  highlight?: boolean; // Default false
}

Properties

headers (PsffTableColumnInfo) array of header rows. At least one header row is required, if you want to hide header use the specific prop
items (any, default: []) array of values rows
current-sort (PsffTableSortInfo, default: { key: null, direction: null }) the table sorting state
hidden-header (boolean, default: false) if the header should be hidden
fixed-header (boolean, default: false) if the header should be fixed on the top of the table container when doing scroll

Events

sort (PsffTableSortInfo) event called when the column sort buttons are clicked with the sort info to apply.
row-enter ({ item: any, rowIndex: number }) emitted enter a row with the mouse.
row-leave ({ item: any, rowIndex: number }) emitted leave a row with the mouse.
row-click ({ item: any, rowIndex: number, columnIndex: number }) emitted when the user clicks on a row marked as clickable: true.

Slots

col-${column.id} (scoped props: column, colIndex) content to place at the specific column title

<template v-slot:col-name="{ column }">{{ column.label }} ({{ column.id }})</template>
<!--
  { id: 'name', label: 'Name' } header will output
  <th>Name (name)</th>
-->

cell-${column.id} (scoped props: value, rowIndex, colIndex) content to place at rows cells as value for the specific column (getting last header row as reference).

<template v-slot:cell-name="{ rowIndex, value }">#{{ rowIndex }} {{ value }}</template>
<!--
  ['John', 'Matt', 'Robert'] item will output
  <td>#0 John</td>
  <td>#1 Matt</td>
  <td>#2 Robert</td>
-->

Custom propperties:

Table
- --psff-table-layout (default fixed)
- --psff-table-background (default #fff)
- --psff-table-max-height (default none)
- --psff-table-min-width (default 0)
- --psff-table-scroll-feedback-background-bottom (default linear-gradient(0deg, #fff .01%, rgba(255, 255, 255, 0) 195.81%))
- --psff-table-scroll-feedback-background-top (default linear-gradient(#fff .01%, rgba(255, 255, 255, 0) 195.81%))
- --psff-table-scroll-feedback-display (default none)
- --psff-table-scroll-feedback-size (default 2rem)
Header
- --psff-table-header-background (default var(--psff-table-background))
- --psff-table-header-border-color (default transparent)
- --psff-table-header-border-size (default 0)
- --psff-table-header-box-shadow (default 0 4px 4px #f7f7f7)
Header Cell
- --psff-table-header-cell-background (default transparent)
- --psff-table-header-cell-background-highlight (default var(--psff-table-header-cell-background))
- --psff-table-header-cell-box-sizing (default "content-box")
- --psff-table-header-color (default #848484)
- --psff-table-header-font-family (default sans-serif)
- --psff-table-header-font-size (default .75rem)
- --psff-table-header-font-variant (default inherit)
- --psff-table-header-font-weight (default 500)
- --psff-table-header-cell-last-child-width (default "auto")
- --psff-table-header-line-height (default 1rem)
- --psff-table-header-cell-min-width (default "auto")
- --psff-table-header-cell-padding (default 1rem)
- --psff-table-header-sides-spacing (default 1.5rem)
- --psff-table-sort-icon-color (default #d6d6d6)
- --psff-table-sort-icon-color (default #648cfa)
- --psff-table-header-cell-white-space (default nowrap)
Body Row:
- --psff-table-body-row-background (default transparent)
- --psff-table-body-row-background-hovered (default var(--psff-table-body-row-background))
- --psff-table-body-row-background-highlight (default var(--psff-table-body-row-background-hovered))
- --psff-table-body-row-background-odd (default var(--psff-table-body-row-background))
- --psff-table-body-row-border-color (default #f7f7f7)
- --psff-table-body-row-border-color-hovered (default transparent transparent var(--psff-table-body-row-border-color))
- --psff-table-body-row-border-color-highlight (default var(--psff-table-body-row-border-color-hovered))
- --psff-table-body-row-border-size (default 1px)
- --psff-table-body-row-border-size-hovered (default var(--psff-table-body-row-border-size))
- --psff-table-body-row-border-size-highlight (default var(--psff-table-body-row-border-size-hovered))
- --psff-table-body-color (default #5a5a5a)
- --psff-table-body-row-color-hovered (default var(--psff-table-body-row-color))
- --psff-table-body-row-color-highlight (default var(--psff-table-body-row-color-hovered))
- --psff-table-body-row-cursor (default auto)
- --psff-table-body-row-cursor-clickable (default pointer)
Body Cell
- --psff-table-body-cell-background (default transparent)
- --psff-table-body-cell-box-sizing (default "content-box")
- --psff-table-body-cell-padding (default 1rem)
- --psff-table-body-cell-white-space (default nowrap)
- --psff-table-body-font-family (default sans-serif)
- --psff-table-body-font-size (default .75rem)
- --psff-table-body-font-variant (default inherit)
- --psff-table-body-font-weight (default 400)
- --psff-table-body-line-height (default 1rem)
- --psff-table-body-sides-spacing (default 1.5rem)