vue3 datatable

Is an Vue.js component for presenting large and complex data. It has all the features you would expect from any other table but in a light package with no external dependencies. The table was designed to be extremely flexible and light; it doesn't make any assumptions about your data or how you: filter, sort or page it.

Installation

npm install @ldmjs/datatable

OR

yarn add @ldmjs/datatable

Use Datatable

import '@ldmjs/datatable/release/index.css';
import Datatable from '@ldmjs/datatable';

const appComponent = createApp(App);
appComponent.component('datatable', Datatable);

<datatable
  id="datatable"
  ref="table"
  class="material ngx-flex nowrap-text"
  :loading-indicator="loading"
  column-mode="standard"
  :group-rows-by="columnsGroupBy"
  :group-expansion-default="true"
  :group-row-height="$ld.table.rowHeight"
  v-model:group-expanded-state="groupState"
  v-model:groupExpansion="groupExpansion"
  :sortType="sortType"
  :header-height="$ld.table.headerRowHeight"
  :row-height="$ld.table.rowHeight"
  :rows="tableRows"
  :columns="columns"
  :tree-from-relation="treeFromRelation"
  :tree-to-relation="treeToRelation"
  :selectionType="selectionType"
  check-mode="checkNoSelect"
  :checkboxable="Boolean(viewOptions.allowGroupActions)"
  :selected="tableSelected"
  :selectAllRowsOnPage="true"
  :rowClass="getRowClass"
  :scrollbar-h="true"
  :scrollbar-v="true"
  :count="pagerOptions.total"
  :offset="pagerOptions.page - 1"
  :rowIdentity="rowIdentity"
  :sorts="tableSortProps"
  :goToFirstAfterSort="false"
  :external-paging="true"
  :messages="{ 'emptyMessage': emptyFolderMessage }"
  :beforeSelectRowCheck="beforeSelectRowCheck"
  @row-count="onRowCountChanged"
  @reorder="onColumnReorder"
  @resize="onColumnResize"
  @sort="onColumnSort"
  @activate="onActivate"
  @select="onSelectRow($event)"
  @check="onCheckRow($event)"
  @tree-action="onTreeAction($event)"
  @page="onPage($event)"
>
  <template #cell-header:append="scope">
    // buttons in header cell
  </template>
  <template #cell="scope">
    // cell content
  </template>
</datatable>