UBuilder table

default usage

<template>
  <u-table class="u-table" :columns="columns" :data="data" />
</template>
<script>
import { UTable } from '@ubuilder/table';
import '@ubuilder/table/styles/default.scss';

export default {
    component: {
        UTable,
    },
    data() {
        return {
            columns: [
                { label: 'COL1', field: 'col1' }
            ],
            data: (pageParamObject, urlSearchParams) => this.$rest.get(`/api/to/list?{$urlSearchParams}`),
        };
    },
}

props

columns: {
    type: Array,
    required: true,
},
data: {
    type: [Array, Object, Function],
    required: true,
},
rowClass: {
    type: Function,
    default: (row, rowIndex) => undefined,
},
hideHead: {
    type: Boolean,
    default: false,
},
showFoot: {
    type: Boolean,
    default: false,
},
page: {
    type: Number,
    default: 1,
},
perPage: {
    type: [String, Number],
    default: 20,
},
defaultSort: {
    type: [String, Object],
    default: '',
},
paginationClass: {
    type: [String, Array, Object],
    default: 'u-pagination',
},

columns

Array<Column|String> Column := { label: String, field: String, sortable?: Boolean, // default false visible?: Boolean, // default true style?: String, }

emits

• row-click(row, rowIndex) : on row clicked
• row-dblclick(row, rowIndex) : on row double clicked
• cell-click(field, row) : on cell clicked
• page-loaded(Page) : on page data loaded

slots

<template #colgroup>
<col><col><!-- ... -->
</template>
<template #caption>
TABLE CAPTION
</template>
<template #loading>
LOADING VIEW
</template>
<template #error>
ERROR VIEW
</template>
<template #pagination="{ page, perPage, total }">
PAGINATION VIEW
</template>
<template #head-[field]>
CUSTOM FIELD HEADER SLOT
</template>
<template #[field]="{ value, row, rowIndex }">
{{ value }}
</template>

rendering example

<div>
  <div class="u-table-wrap">
    <table>
      <thead>
        <tr>
            <th>COL1</th>
            <th>COL2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
            <td>VAL1-1</td>
            <td>VAL1-2</td>
        </tr>
      </tbody>
    </table>
  </div>
  <nav class="u-pagination">
    <!-- pagination, refer @ubuilder/pagination -->
  </nav>
</div>

default scss

div.u-table {
    & > div.u-table-wrap {
        width: 100%;
        overflow-x: auto;

        & > table {
            border-collapse: collapse;
            box-sizing: border-box;
            padding: 0.5rem;
            width: 100%;

            thead {
                border-bottom: 2px solid #ccc;
                border-top: none;
            }

            tfoot {
                border-top: 2px solid #ccc;
                border-bottom: none;
            }

            th {
                padding: 0.5rem;
                text-align: center;
            }

            td {
                border-color: #ccc;
                border-style: solid;
                border-width: 1px 0;
                padding: 0.5rem;
                color: #333;
            }

            & > tbody {
                & > tr:hover {
                    background-color: #ccc;
                    & > td {
                        color: black;
                    }
                }

                & > tr.state {
                    background-color: transparent;
                    text-align: center;
                }
            }
        }
    }
}