Zb-Table

A vue based implementation of modern dynamic tables that bring the best experience and simplicity. It supports enough props to satisfy mind-blowing customizations.

Installation

npm i @jkwamlah/z-table

yarn add @jkwamlah/z-table

Props

1columns: {
2  type: Array,
3  default: () => ([])
4},
5pagination: {
6  type: Boolean,
7  default: false
8},
9numberOfRows: {
10  type: String,
11  default: ''
12},
13height: {
14  type: String,
15  default: ''
16},
17actualHeight: {
18  type: String,
19  default: '253.2'
20},
21rowData: {
22  type: Array,
23  default: () => ([{}])
24},

Usage

1<z-table
2    :columns="tableColumns"
3    :number-of-rows="tableRows.length.toString()"
4    :pagination="true"
5  >
6    <template>
7      <tr
8        v-for="(row, rowKey) in tableRows"
9        @click.stop="handleShow(rowKey)"
10        :style="{marginBottom: setLineAndSpace(rowKey) ? '1.31rem' : '1.25rem',
11        paddingBottom: setLineAndSpace(rowKey) ? '1.31rem' : '',
12        borderBottom: setLineAndSpace(rowKey) ? '#F3F3F3 0.06rem solid': ''}"
13        class="d-flex align-items-center"
14      >
15        <z-table-data
16          width="6%"
17        >
18          <template>
19            <z-switch></z-switch>
20          </template>
21        </z-table-data>
22        <z-table-data
23          width="3%"
24          :data="row.id"
25        />
26        <z-table-data
27          width="20%"
28          :data="row.name"
29        />
30        <z-table-data
31          width="21%"
32          :data="row.company"
33        />
34        <z-table-data
35          width="10%"
36          :data="row.netSalary"
37        />
38        <z-table-data
39          width="15%"
40          :data="row.balance"
41        />
42        <z-table-data
43          width="10%"
44          :data="'GHS ' + row.affordability"
45        >
46          <template>
47            <span class="mr-4" @click.prevent="handleIconClicked(rowKey)">
48              <i class="icon-pencil"></i>
49            </span>
50          </template>
51        </z-table-data>
52        <z-table-data
53          width="9%"
54          @icon-clicked="handleIconClicked"
55        >
56          <template>
57            <z-pill
58              :status="row.approval"
59              :background-color="row.approval === 'approved' ? '#F2FDD3' : '#FFE5D4'"
60              :status-indicator-color="row.approval === 'approved' ? '#8DE028' : '#FF3C2B'"
61            />
62          </template>
63        </z-table-data>
64        <z-table-data
65          width="3%"
66        >
67          <template>
68            <z-button
69              :buttonStyleObject="kycButtonStyleObject"
70              :textStyleObject="kycButtonTextStyleObject"
71              button-type="button"
72              button-text="view"
73            ></z-button>
74          </template>
75        </z-table-data>
76      </tr>
77    </template>
78  </z-table>