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.
npm install @ldmjs/datatable
OR
yarn add @ldmjs/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"
: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>