DataTable Bileseni

SkDatatable, admin panelde kullanilan paket tabanli tablo bilesenidir.

Importlar

import { DB } from '@lvntr/components/DatatableBuilder/core';
import SkDatatable from '@lvntr/components/DatatableBuilder/SkDatatable.vue';

Temel kullanim

<script setup lang="ts">
import { DB } from '@lvntr/components/DatatableBuilder/core';
import SkDatatable from '@lvntr/components/DatatableBuilder/SkDatatable.vue';
import users from '@/routes/users';

interface UserRow {
    id: string;
    full_name: string;
    email: string;
    role: string;
    status: string;
    created_at: string;
}

const tableConfig = DB.table<UserRow>()
    .route(users.dtApi.url())
    .addColumns(
        DB.column<UserRow>().label('common.full_name').key('full_name'),
        DB.column<UserRow>().key('email'),
        DB.column<UserRow>().label('common.role').key('role'),
        DB.column<UserRow>().key('status').enumTag(),
    )
    .addActions(
        DB.action<UserRow>()
            .icon('pi pi-pencil')
            .severity('warn')
            .label('button.edit')
            .handle((row) => console.log(row.id)),
    )
    .build();
</script>

<template>
    <SkDatatable :config="tableConfig" refresh-key="users-table" />
</template>

Table builder API

• route(url) string, Wayfinder sonucu ya da { url } donduren callback kabul eder
• sortable(enabled)
• pagination(enabled)
• searchable(enabled)
• isCard(enabled)
• cardTitle(title)
• cardSubtitle(subtitle)
• perPage(count)
• idColumn(config | false)
• addColumns(...columns)
• addFilters(...filters)
• addActions(...actions)
• addMenuActions(...menuActions)
• menuButton(config)
• create(config)

Column builder

• key(string)
• label(string)
• sortable(boolean)
• render((row, escape) => string)
• tag(severity | fn)
• tagKey(key)
• enumTag()
• sticky()

enumTag(), backend tarafinda {key}_label ve {key}_severity alanlarini bekler.

Filter builder

• key(string)
• label(string)
• type('text' | 'select' | 'multiselect' | 'daterange')
• options([...])
• placeholder(string)
• inline()
• placement('inline' | 'panel')

Satir aksiyonlari

Inline actions

Satirin icinde dogrudan gorunen butonlar icin DB.action() kullanilir.

• icon
• severity
• size
• variant
• rounded
• raised
• text
• outlined
• label
• tooltip
• visible(fn)
• handle(fn)

Menu actions

Uc nokta menusundeki aksiyonlar icin DB.menuAction() kullanilir.

• label
• icon
• separator
• visible(fn)
• handle(fn)

Dahili davranislar

SkDatatable sunlari hazir olarak getirir:

• server-side arama, siralama, sayfalama ve filtreleme
• paylasilabilir tablo URL'leri icin query string senkronizasyonu
• sayfa yenilemelerinde sessionStorage kaliciligi
• refresh-key ile opsiyonel refresh bus entegrasyonu
• dahili per-page kontrolleri
• cekilen satirlari disari veren load eventi

DataTable Component

SkDatatable is the package-powered table component used throughout the admin panel.

Imports

import { DB } from '@lvntr/components/DatatableBuilder/core';
import SkDatatable from '@lvntr/components/DatatableBuilder/SkDatatable.vue';

Basic usage

<script setup lang="ts">
import { DB } from '@lvntr/components/DatatableBuilder/core';
import SkDatatable from '@lvntr/components/DatatableBuilder/SkDatatable.vue';
import users from '@/routes/users';

interface UserRow {
    id: string;
    full_name: string;
    email: string;
    role: string;
    status: string;
    created_at: string;
}

const tableConfig = DB.table<UserRow>()
    .route(users.dtApi.url())
    .addColumns(
        DB.column<UserRow>().label('common.full_name').key('full_name'),
        DB.column<UserRow>().key('email'),
        DB.column<UserRow>().label('common.role').key('role'),
        DB.column<UserRow>().key('status').enumTag(),
    )
    .addActions(
        DB.action<UserRow>()
            .icon('pi pi-pencil')
            .severity('warn')
            .label('button.edit')
            .handle((row) => console.log(row.id)),
    )
    .build();
</script>

<template>
    <SkDatatable :config="tableConfig" refresh-key="users-table" />
</template>

Table builder API

• route(url) accepts a string, a Wayfinder result object, or a callback returning { url }
• sortable(enabled)
• pagination(enabled)
• searchable(enabled)
• isCard(enabled)
• cardTitle(title)
• cardSubtitle(subtitle)
• perPage(count)
• idColumn(config | false)
• addColumns(...columns)
• addFilters(...filters)
• addActions(...actions)
• addMenuActions(...menuActions)
• menuButton(config)
• create(config)

Column builder

• key(string)
• label(string)
• sortable(boolean)
• render((row, escape) => string)
• tag(severity | fn)
• tagKey(key)
• enumTag()
• sticky()

enumTag() expects backend fields like {key}_label and {key}_severity.

Filter builder

• key(string)
• label(string)
• type('text' | 'select' | 'multiselect' | 'daterange')
• options([...])
• placeholder(string)
• inline()
• placement('inline' | 'panel')

Row actions

Inline actions

Use DB.action() for buttons rendered directly in the row.

• icon
• severity
• size
• variant
• rounded
• raised
• text
• outlined
• label
• tooltip
• visible(fn)
• handle(fn)

Menu actions

Use DB.menuAction() for actions inside the three-dot dropdown menu.

• label
• icon
• separator
• visible(fn)
• handle(fn)

Built-in behavior

SkDatatable already includes:

• server-side search, sort, pagination, and filters
• query string sync for shareable table URLs
• sessionStorage persistence between reloads
• optional refresh bus integration through refresh-key
• automatic per-page controls
• a load event that emits fetched rows