@rei/cdr-data-table v1.1.2

CdrDataTable

For the most up-to-date information, see REI Cedar documentation.

Properties

Slots

Installation

Resources are available within the CdrDataTable package:

• Component: @rei/cdr-data-table
• Component styles: cdr-data-table.css

To incorporate the required assets for a component, use the following steps:

1. Install using NPM

Install the CdrDataTable package using npm in your terminal:

Terminal

npm i -S @rei/cdr-data-table

2. Import dependencies

main.js

// import your required CSS.
import "@rei/cdr-data-table/dist/cdr-data-table.css";

3. Add component to a template

local.vue

<template>
  <cdr-table
    id="size-details"
    :col-headers="colHeaders"
    :row-headers="rowHeaders"
    :row-data="rowData"
    :key-order="keyOrder"
  />
</template>

<script>
import { CdrTable } from '@rei/cdr-table';
export default {
  ...
  components: {
     CdrTable  
  }, 
  data() {
    ...
  },
}
</script>

Usage

Using Props

The simplest way to use CdrDataTable is using the props API. The below example shows how:

• The data props (colHeaders, rowHeaders, rowData) are used
• keyOrder determines values displayed in each cell. The array order must match the colHeaders or column order

<template>
  <cdr-data-table
    id="props-example"
    :col-headers="colHeaders"
    :row-headers="rowHeaders"
    :row-data="rowData"
    :key-order="keyOrder"
    caption="CdrTable props usage"
  />
</template>

<script>
  ...
  data() {
    colHeaders: ['XS', 'S', 'M', 'L', 'XL', 'XXL', 'XXXL'],
    rowHeaders: ['Chest', 'Sleeve Length', 'Waist', 'Hip', 'Inseam'],
    keyOrder: ['xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl'],
    rowData: [
      {
        xs: '31.5 - 33',
        s: '35 - 38',
        m: '38 - 41',
        l: '42 - 45',
        xl: '46 - 49',
        xxl: '50 - 53',
        xxxl: '54-57',
      },
      {
        s: '33',
        m: '34',
        l: '35',
        xl: '35.5',
        xxl: '36',
        xxxl: '36.6',
        xs: 'N/A',
      },
      ...
    ],
  },
}
</script>

Using Slots

The same table can be rendered using the v-for Vue directive and CdrDataTable's named slots:

• Iterates over the data set by looping through items in an array or object
• Generates appropriate markup for each named slot

In the below examples, the colHeaders prop is set to true because there are column headers for the data table.

<template>
  <cdr-data-table
    id="slots-example"
    :col-headers="true"
    caption="CdrTable slots usage"
  >
    <template slot="thead">
       <tr>
         <th
           class="empty"
           scope="col"
         />
         <th
           v-for="(header, index) in tableData.colHeaders"
           :key="index"
         >
           {{ header }}
         </th>
       </tr>
     </template>
     <template slot="tbody">
       <tr
         v-for="(row, index) in tableData.rowData"
         :key="'tr_' + index"
       >
         <th
           scope="row"
         >{{ tableData.rowHeaders[index] }}</th>
         <td
           v-for="(key, index) in ['xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl']"
           :key="index"
         >{{ row[key] }}
         </td>
       </tr>
     </template>
  </cdr-data-table>
</template>

<script>
  ...
  data() {
    ...
 ],
  },
}
</script>

The below example uses:

• compact and borderless modifiers
• CdrDataTable's named slots
• Markup is manual, not data-driven

<cdr-data-table
  modifier="compact borderless"
  caption="Full Manual - Compact & Borderless"
  id="full-manual"
>
  <template slot="tbody">
    <tr>
      <th scope=”row”>Best Use</th>
      <td>Casual</td>
    </tr>
    <tr>
      <th scope=”row”>Fabric</th>
      <td>Cotton canvas</td>
    </tr>
    <tr>
      <th scope=”row”>Lining Fabric</th>
      <td>Polyester microfleece/nylon</td>
    </tr>
    ...
  </template>
</cdr-data-table>

Modifiers

Following variants are available to the cdr-data-table modifier attribute: