@psff/cmp-table

@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)