[Table] Implement more TanStack Table features

[benjamincanac]

• Pagination
• Row Pinning
• Grouping
• Virtualization
• ...

[itpropro]

Would love to see

• Column resizing
• Column reordering (maybe with dnd support?)

[benjamincanac]

The goal is to implement all of them but I have so many things to do at the moment that it might take a while to support them all.

[itpropro]

The goal is to implement all of them but I have so many things to do at the moment that it might take a while to support them all.

Just added them for the backlog, it's already great that you managed to migrate to tanstack table in such a short amount of time!

[blouflashdb]

Pagination is the most important one for me right now.

[divine]

Hello,

Any chance additional slots will be added to the table such as thead and tbody to have a better control over it:

ui/src/runtime/components/Table.vue

Lines 223 to 236 in f6d05b0

	<thead :class="ui.thead({ class: [props.ui?.thead] })">
	<tr v-for="headerGroup in tableApi.getHeaderGroups()" :key="headerGroup.id" :class="ui.tr({ class: [props.ui?.tr] })">
	<th
	v-for="header in headerGroup.headers"
	:key="header.id"
	:data-pinned="header.column.getIsPinned()"
	:class="ui.th({ class: [props.ui?.th, header.column.columnDef.meta?.class?.th], pinned: !!header.column.getIsPinned() })"
	>
	<slot :name="`${header.id}-header`" v-bind="header.getContext()">
	<FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header" :props="header.getContext()" />
	</slot>
	</th>
	</tr>
	</thead>

and

ui/src/runtime/components/Table.vue

Lines 238 to 268 in f6d05b0

	<tbody :class="ui.tbody({ class: [props.ui?.tbody] })">
	<template v-if="tableApi.getRowModel().rows?.length">
	<template v-for="row in tableApi.getRowModel().rows" :key="row.id">
	<tr :data-selected="row.getIsSelected()" :data-can-select="!!props.onSelect" :data-expanded="row.getIsExpanded()" :class="ui.tr({ class: [props.ui?.tr] })" @click="handleRowSelect(row, $event)">
	<td
	v-for="cell in row.getVisibleCells()"
	:key="cell.id"
	:data-pinned="cell.column.getIsPinned()"
	:class="ui.td({ class: [props.ui?.td, cell.column.columnDef.meta?.class?.td], pinned: !!cell.column.getIsPinned() })"
	>
	<slot :name="`${cell.column.id}-cell`" v-bind="cell.getContext()">
	<FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
	</slot>
	</td>
	</tr>
	<tr v-if="row.getIsExpanded()" :class="ui.tr({ class: [props.ui?.tr] })">
	<td :colspan="row.getAllCells().length" :class="ui.td({ class: [props.ui?.td] })">
	<slot name="expanded" :row="row" />
	</td>
	</tr>
	</template>
	</template>
	<tr v-else :class="ui.tr({ class: [props.ui?.tr] })">
	<td :colspan="columns?.length" :class="ui.empty({ class: props.ui?.empty })">
	<slot name="empty">
	{{ t('table.noData') }}
	</slot>
	</td>
	</tr>
	</tbody>

What I'd like is ability to use my own custom logic for thead and tbody, currently it's not possible.

Thanks!