nexa-ui-kit 0.6.0

package/dist/components/NDataTable.js

@@ -0,0 +1,252 @@
+import { signal, computed, effect, h, hText, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
+import NPaginator from './NPaginator.js'
+
+const _sfc_main = defineComponent({
+  __scopeId: 'data-v-71b71cd6',
+  __hmrId: 'NDataTable_nexa',
+  props: { value: { type: Array, default: () => [] }, columns: { type: Array, default: () => [] }, stripedRows: { type: Boolean, default: false }, hoverRows: { type: Boolean, default: true }, size: { type: String, default: 'md' }, scrollable: { type: Boolean, default: true }, paginator: { type: Boolean, default: true }, rows: { type: Number, default: 10 }, first: { type: Number, default: 0 }, rowsPerPageOptions: { type: Array, default: () => [10, 20, 50] }, selectionMode: { type: String, default: '' }, selection: { type: null, default: null }, dataKey: { type: String, default: '' }, sortField: { type: String, default: '' }, sortOrder: { type: Number, default: 1 }, resizableColumns: { type: Boolean, default: true }, columnResizeMode: { type: String, default: 'fit' }, filterDisplay: { type: String, default: 'row' }, globalFilter: { type: String, default: '' }, globalFilterFields: { type: Array, default: null }, filters: { type: null, default: null }, lazy: { type: Boolean, default: false }, totalRecords: { type: Number, default: 0 }, emptyMessage: { type: String, default: 'No records found' }, showGridlines: { type: Boolean, default: false } },
+  emits: ['update:first', 'update:rows', 'update:selection', 'update:sortField', 'update:sortOrder', 'update:globalFilter', 'update:filters', 'updateFirst', 'updateRows', 'updateSelection', 'updateSortField', 'updateSortOrder', 'updateGlobalFilter', 'updateFilters', 'page', 'rowSelect', 'rowUnselect', 'sort', 'filter'],
+  setup(props, setupContext) {
+    const { emit, slots, slots: $slots } = setupContext
+    const internalFirst = signal(props.first || 0)
+    const internalRows = signal(props.rows || 10)
+    const internalSortField = signal(props.sortField || '')
+    const internalSortOrder = signal(props.sortOrder || 1)
+    const internalFilters = signal((props.filters && typeof props.filters === 'object') ? props.filters : { __global: props.globalFilter || '' })
+    const effectiveFilters = computed(() => (props.filters && typeof props.filters === 'object') ? props.filters : internalFilters.value)
+    const columnWidths = signal({})
+    const resizing = signal(null)
+    const internalSelection = signal(props.selection)
+    effect(() => { internalFirst.value = props.first || 0 })
+    effect(() => { internalRows.value = props.rows || 10 })
+    effect(() => { internalSortField.value = props.sortField || '' })
+    effect(() => { internalSortOrder.value = props.sortOrder || 1 })
+    let lastPropGlobal = props.globalFilter || ''
+    effect(() => {
+      const next = props.globalFilter || ''
+      if (next === lastPropGlobal) return
+      lastPropGlobal = next
+      if (props.filters && typeof props.filters === 'object') return
+      internalFilters.value = { ...internalFilters.value, __global: next }
+    })
+    let lastPropSelection = props.selection
+    effect(() => {
+      const next = props.selection
+      if (next === lastPropSelection) return
+      lastPropSelection = next
+      internalSelection.value = next
+    })
+    const normalizeColumns = computed(() => (props.columns || []).map((c, idx) => { const field = c.field || `col_${idx}`; const header = c.header ?? field; const sortable = !!c.sortable; const filterable = c.filterable !== false; const type = c.type || 'text'; const width = c.width || ''; const minWidth = c.minWidth || '120px'; const align = c.align || (type === 'number' ? 'right' : 'left'); const filterMatchMode = c.filterMatchMode || 'contains'; return { ...c, field, header, sortable, filterable, type, width, minWidth, align, filterMatchMode } }))
+    const getRowKey = (row, index) => (props.dataKey && row && typeof row === 'object' && props.dataKey in row) ? String(row[props.dataKey]) : String(index)
+    const effectiveSelection = computed(() => internalSelection.value)
+    const isRowSelected = (row, index) => {
+      if (!props.selectionMode) return false
+      const selection = effectiveSelection.value
+      const key = getRowKey(row, index)
+      if (props.selectionMode === 'single') {
+        if (!selection) return false
+        if (props.dataKey && typeof selection === 'object' && selection && props.dataKey in selection) return String(selection[props.dataKey]) === key
+        return selection === row
+      }
+      const current = Array.isArray(selection) ? selection : []
+      if (props.dataKey) return current.some(s => s && typeof s === 'object' && props.dataKey in s && String(s[props.dataKey]) === key)
+      return current.includes(row)
+    }
+    const toggleRowSelection = (row, index) => {
+      if (!props.selectionMode) return
+      const selected = isRowSelected(row, index)
+      if (props.selectionMode === 'single') {
+        const next = selected ? null : row
+        internalSelection.value = next
+        emit('update:selection', next)
+        emit('updateSelection', next)
+        emit(selected ? 'rowUnselect' : 'rowSelect', { data: row })
+        return
+      }
+      const current = Array.isArray(effectiveSelection.value) ? effectiveSelection.value : []
+      const key = getRowKey(row, index)
+      const next = selected
+        ? (props.dataKey ? current.filter(r => String(r?.[props.dataKey]) !== key) : current.filter(r => r !== row))
+        : [...current, row]
+      internalSelection.value = next
+      emit('update:selection', next)
+      emit('updateSelection', next)
+      emit(selected ? 'rowUnselect' : 'rowSelect', { data: row })
+    }
+    const allVisibleSelected = computed(() => {
+      if (props.selectionMode !== 'multiple') return false
+      const rows = visibleRows.value
+      if (rows.length === 0) return false
+      for (let i = 0; i < rows.length; i++) {
+        if (!isRowSelected(rows[i], i + (internalFirst.value || 0))) return false
+      }
+      return true
+    })
+    const toggleAllVisible = () => {
+      if (props.selectionMode !== 'multiple') return
+      const current = Array.isArray(effectiveSelection.value) ? effectiveSelection.value : []
+      const rows = visibleRows.value
+      const startIndex = internalFirst.value || 0
+      if (rows.length === 0) return
+      if (allVisibleSelected.value) {
+        if (!props.dataKey) {
+          const next = current.filter(r => !rows.includes(r))
+          internalSelection.value = next
+          emit('update:selection', next)
+          emit('updateSelection', next)
+          return
+        }
+        const keys = rows.map((r, i) => getRowKey(r, startIndex + i))
+        const next = current.filter(r => !keys.includes(String(r?.[props.dataKey])))
+        internalSelection.value = next
+        emit('update:selection', next)
+        emit('updateSelection', next)
+        return
+      }
+      if (!props.dataKey) {
+        const next = [...current, ...rows.filter(r => !current.includes(r))]
+        internalSelection.value = next
+        emit('update:selection', next)
+        emit('updateSelection', next)
+        return
+      }
+      const existing = new Set(current.map(r => String(r?.[props.dataKey])))
+      const next = [...current, ...rows.filter((r) => !existing.has(String(r?.[props.dataKey])))]
+      internalSelection.value = next
+      emit('update:selection', next)
+      emit('updateSelection', next)
+    }
+    const getHeaderContent = (col) => (col.headerTemplate && typeof col.headerTemplate === 'function') ? col.headerTemplate(col) : col.header
+    const getRawValue = (row, col) => { if (!row) return ''; if (col.field && typeof row === 'object' && col.field in row) return row[col.field]; return '' }
+    const getCellContent = (row, col, index) => { const raw = getRawValue(row, col); if (col.body && typeof col.body === 'function') return col.body(row, { index, column: col, field: col.field, value: raw }); return raw }
+    const matchFilter = (value, query, mode) => { const q = String(query ?? '').toLowerCase().trim(); if (!q) return true; const v = String(value ?? '').toLowerCase(); if (mode === 'equals') return v === q; if (mode === 'startsWith') return v.startsWith(q); if (mode === 'endsWith') return v.endsWith(q); return v.includes(q) }
+    const filteredRows = computed(() => { const rows = props.value || []; if (props.lazy) return rows; const cols = normalizeColumns.value; const filters = effectiveFilters.value || {}; const global = String(filters.__global || '').trim(); const keys = Object.keys(filters).filter(k => k !== '__global'); if (!global && keys.length === 0) return rows; const globalFields = Array.isArray(props.globalFilterFields) && props.globalFilterFields.length ? props.globalFilterFields : cols.map(c => c.field); return rows.filter((row) => { if (global) { const ok = globalFields.some((f) => matchFilter(getRawValue(row, { field: f }), global, 'contains')); if (!ok) return false } for (const c of cols) { const f = filters[c.field]; if (!f) continue; if (!matchFilter(getRawValue(row, c), f.value, f.matchMode || c.filterMatchMode || 'contains')) return false } return true }) })
+    const sortedRows = computed(() => { if (props.lazy) return filteredRows.value; const rows = [...filteredRows.value]; const field = internalSortField.value; if (!field) return rows; const col = normalizeColumns.value.find(c => c.field === field); const order = internalSortOrder.value === -1 ? -1 : 1; const type = col?.type || 'text'; rows.sort((a, b) => { const av = getCellContent(a, { field }, -1); const bv = getCellContent(b, { field }, -1); if (type === 'number') return (Number(av) - Number(bv)) * order; return String(av ?? '').localeCompare(String(bv ?? ''), undefined, { numeric: true, sensitivity: 'base' }) * order }); return rows })
+    const totalRecords = computed(() => props.lazy ? (props.totalRecords || (props.value || []).length) : sortedRows.value.length)
+    const visibleRows = computed(() => props.lazy ? (props.value || []) : (!props.paginator ? sortedRows.value : sortedRows.value.slice(internalFirst.value || 0, (internalFirst.value || 0) + (internalRows.value || 10))))
+    const setSort = (col) => {
+      if (!col.sortable) return
+      const nextField = col.field
+      let nextOrder = 1
+      if (internalSortField.value === nextField) nextOrder = internalSortOrder.value === 1 ? -1 : 1
+      internalSortField.value = nextField
+      internalSortOrder.value = nextOrder
+      internalFirst.value = 0
+      emit('update:sortField', nextField)
+      emit('update:sortOrder', nextOrder)
+      emit('updateSortField', nextField)
+      emit('updateSortOrder', nextOrder)
+      emit('sort', { sortField: nextField, sortOrder: nextOrder })
+    }
+    const onSortClick = (e) => { const field = e.currentTarget?.dataset?.field; if (!field) return; const col = normalizeColumns.value.find(c => c.field === field); if (!col) return; setSort(col) }
+    const setGlobal = (e) => {
+      const next = e.target.value
+      const nextFilters = { ...(effectiveFilters.value || {}), __global: next }
+      if (props.filters && typeof props.filters === 'object') { emit('update:filters', nextFilters); emit('updateFilters', nextFilters) } else { internalFilters.value = nextFilters }
+      internalFirst.value = 0
+      emit('update:globalFilter', next)
+      emit('updateGlobalFilter', next)
+      emit('filter', { global: next, filters: nextFilters })
+    }
+    const setColumnFilter = (field, e) => { const next = e.target.value; const current = { ...(effectiveFilters.value || {}) }; const col = normalizeColumns.value.find(c => c.field === field); if (!next) delete current[field]; else current[field] = { value: next, matchMode: col?.filterMatchMode || current[field]?.matchMode || 'contains' }; if (props.filters && typeof props.filters === 'object') { emit('update:filters', current); emit('updateFilters', current) } else { internalFilters.value = current } internalFirst.value = 0; emit('filter', { field, value: next, filters: current }) }
+    const onColumnFilterInput = (e) => { const field = e.target?.dataset?.field; if (!field) return; setColumnFilter(field, e) }
+    const onPage = ({ first, rows }) => {
+      internalFirst.value = first
+      internalRows.value = rows
+      emit('update:first', first)
+      emit('update:rows', rows)
+      emit('updateFirst', first)
+      emit('updateRows', rows)
+      emit('page', { first, rows })
+    }
+    const getWidth = (col) => columnWidths.value[col.field] || col.width || ''
+    const startResize = (e) => { if (!props.resizableColumns) return; const field = e.currentTarget?.dataset?.field; if (!field) return; e.preventDefault(); e.stopPropagation(); const th = e.currentTarget?.parentElement; const base = th?.getBoundingClientRect?.().width || parseFloat(th?.style?.width || '') || 160; resizing.value = { field, startX: e.clientX, startW: base }; const onMove = (ev) => { if (!resizing.value) return; const delta = ev.clientX - resizing.value.startX; const next = Math.max(80, resizing.value.startW + delta); columnWidths.value = { ...columnWidths.value, [resizing.value.field]: `${Math.round(next)}px` } }; const onUp = () => { document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp); resizing.value = null }; document.addEventListener('mousemove', onMove); document.addEventListener('mouseup', onUp) }
+    return { internalFirst, internalRows, internalSortField, internalSortOrder, internalFilters, effectiveFilters, columnWidths, resizing, internalSelection, lastPropGlobal, lastPropSelection, normalizeColumns, getRowKey, effectiveSelection, isRowSelected, toggleRowSelection, allVisibleSelected, toggleAllVisible, getHeaderContent, getRawValue, getCellContent, matchFilter, filteredRows, sortedRows, totalRecords, visibleRows, setSort, onSortClick, setGlobal, setColumnFilter, onColumnFilterInput, onPage, getWidth, startResize, NPaginator, $slots, emit }
+  }
+})
+// Injected render function
+_sfc_main.render = function(ctx) {
+  const { internalFirst, internalRows, internalSortField, internalSortOrder, internalFilters, effectiveFilters, columnWidths, resizing, internalSelection, lastPropGlobal, lastPropSelection, normalizeColumns, getRowKey, effectiveSelection, isRowSelected, toggleRowSelection, allVisibleSelected, toggleAllVisible, getHeaderContent, getRawValue, getCellContent, matchFilter, filteredRows, sortedRows, totalRecords, visibleRows, setSort, onSortClick, setGlobal, setColumnFilter, onColumnFilterInput, onPage, getWidth, startResize, NPaginator: _ntc_NPaginator, $slots, emit, value, columns, stripedRows, hoverRows, size, scrollable, paginator, rows, first, rowsPerPageOptions, selectionMode, selection, dataKey, sortField, sortOrder, resizableColumns, columnResizeMode, filterDisplay, globalFilter, globalFilterFields, filters, lazy, emptyMessage, showGridlines, Fragment: _ntc_Fragment } = ctx
+    return h('div', { class: ["n-dt", [`n-dt-${size}`, showGridlines ? 'is-grid' : '', scrollable ? 'is-scroll' : '']], "data-v-71b71cd6": "" }, [
+        "\n    ",
+        h('div', { class: "n-dt-toolbar", "data-v-71b71cd6": "" }, [
+        h('div', { class: "n-dt-global", "data-v-71b71cd6": "" }, [
+        h('input', { class: "n-dt-global-input", value: effectiveFilters.value.__global || '', placeholder: "Search...", onInput: setGlobal, "data-v-71b71cd6": "" })
+      ])
+      ]),
+        "\n    ",
+        h('div', { class: "n-dt-wrapper", "data-v-71b71cd6": "" }, [
+        "\n      ",
+        h('table', { class: ["n-dt-table", { 'is-striped': stripedRows, 'is-hover': hoverRows }], "data-v-71b71cd6": "" }, [
+        "\n        ",
+        h('thead', { class: "n-dt-thead", "data-v-71b71cd6": "" }, [
+        "\n          ",
+        h('tr', { class: "n-dt-head-row", "data-v-71b71cd6": "" }, [
+        (selectionMode) ? h('th', { class: "n-dt-th is-selection", "data-v-71b71cd6": "" }, [
+        (selectionMode === 'multiple') ? h('input', { class: "n-dt-selectbox", type: "checkbox", checked: allVisibleSelected.value, onClick: ($event) => { $event.stopPropagation(); (toggleAllVisible)($event) }, "data-v-71b71cd6": "" }) : null
+      ]) : null,
+        normalizeColumns.value.map((col, index) =>
+        h('th', { class: ["n-dt-th", [`is-${col.align}`, col.sortable ? 'is-sortable' : '']], key: col.field, style: { width: getWidth(col) || undefined, minWidth: col.minWidth }, "data-field": col.field, onClick: onSortClick, "data-v-71b71cd6": "" }, [
+        h('div', { class: "n-dt-th-content", "data-v-71b71cd6": "" }, [
+        h('span', { class: "n-dt-th-text", "data-v-71b71cd6": "" }, [
+        getHeaderContent(col)
+      ]),
+        (col.sortable) ? h('span', { class: ["n-dt-sort", { 'is-active': internalSortField.value === col.field }], "data-v-71b71cd6": "" }, [
+        (internalSortField.value !== col.field) ? h('span', { class: "n-dt-sort-icon", "data-v-71b71cd6": "" }, [
+        "↕"
+      ]) : (true) ? h('span', { class: "n-dt-sort-icon", "data-v-71b71cd6": "" }, [
+        internalSortOrder.value === 1 ? '↑' : '↓'
+      ]) : null
+      ]) : null
+      ]),
+        (resizableColumns) ? h('span', { class: "n-dt-resizer", "data-field": col.field, onMousedown: startResize, "data-v-71b71cd6": "" }) : null
+      ])
+      )
+      ]),
+        "\n          ",
+        (filterDisplay === 'row') ? h('tr', { class: "n-dt-filter-row", "data-v-71b71cd6": "" }, [
+        (selectionMode) ? h('th', { class: "n-dt-th is-selection", "data-v-71b71cd6": "" }) : null,
+        normalizeColumns.value.map((col, index) =>
+        h('th', { class: ["n-dt-th", `is-${col.align}`], key: col.field, style: { width: getWidth(col) || undefined, minWidth: col.minWidth }, "data-v-71b71cd6": "" }, [
+        (col.filterable) ? h('input', { class: "n-dt-filter", "data-field": col.field, value: (effectiveFilters.value[col.field]?.value) || '', placeholder: "Filter", onInput: onColumnFilterInput, "data-v-71b71cd6": "" }) : null
+      ])
+      )
+      ]) : null
+      ]),
+        "\n        ",
+        h('tbody', { class: "n-dt-tbody", "data-v-71b71cd6": "" }, [
+        "\n          ",
+        visibleRows.value.map((row, i) =>
+        h('tr', { class: ["n-dt-row", { 'is-selected': isRowSelected(row, i + internalFirst.value) }], key: getRowKey(row, i + internalFirst.value), onClick: ($event) => { toggleRowSelection(row, i + internalFirst.value) }, "data-v-71b71cd6": "" }, [
+        (selectionMode) ? h('td', { class: "n-dt-td is-selection", "data-v-71b71cd6": "" }, [
+        h('input', { class: "n-dt-selectbox", type: "checkbox", checked: isRowSelected(row, i + internalFirst.value), onClick: ($event) => { $event.stopPropagation(); (($event) => { toggleRowSelection(row, i + internalFirst.value) })($event) }, "data-v-71b71cd6": "" })
+      ]) : null,
+        normalizeColumns.value.map((col, index) =>
+        h('td', { class: ["n-dt-td", `is-${col.align}`], key: col.field, style: { width: getWidth(col) || undefined, minWidth: col.minWidth }, "data-v-71b71cd6": "" }, [
+        getCellContent(row, col, i + internalFirst.value)
+      ])
+      )
+      ])
+      ),
+        "\n          ",
+        (visibleRows.value.length === 0) ? h('tr', { class: "n-dt-empty-row", "data-v-71b71cd6": "" }, [
+        h('td', { class: "n-dt-empty", colspan: normalizeColumns.value.length + (selectionMode ? 1 : 0), "data-v-71b71cd6": "" }, [
+        emptyMessage
+      ])
+      ]) : null
+      ]),
+        "\n      "
+      ]),
+        "\n    "
+      ]),
+        "\n    ",
+        (paginator) ? h(_ntc_NPaginator, { first: internalFirst.value, rows: internalRows.value, totalRecords: totalRecords.value, rowsPerPageOptions: rowsPerPageOptions, onPage: onPage, "data-v-71b71cd6": "" }) : null
+      ])
+}
+_sfc_main.__scopeId = 'data-v-71b71cd6'
+_sfc_main.__hmrId = 'NDataTable_nexa'
+
+export default _sfc_main
+
+const __style = `.n-dt[data-v-71b71cd6]{border:1px solid var(--n-color-border);border-radius:var(--n-radius-lg);background:var(--n-color-surface);overflow:hidden;font-family:var(--n-font-sans)}.n-dt-toolbar{display:flex;align-items:center;justify-content:space-between;padding:var(--n-space-3) var(--n-space-4);border-bottom:1px solid var(--n-color-border);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.08))}.n-dt-global{display:flex;align-items:center;gap:var(--n-space-2)}.n-dt-global-input{width:280px;max-width:100%;background:var(--n-color-bg);border:1px solid var(--n-color-border);border-radius:var(--n-radius-md);padding:0.55rem 0.75rem;color:var(--n-color-text);font-size:var(--n-text-sm);outline:none;box-sizing:border-box}.n-dt-global-input:focus{border-color:var(--n-color-primary);box-shadow:0 0 0 3px var(--n-color-primary-light)}.n-dt-wrapper{width:100%;overflow:auto}.n-dt-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.n-dt-thead{background:var(--n-color-surface)}.n-dt-th,.n-dt-td{padding:0.75rem 0.9rem;border-bottom:1px solid var(--n-color-border);color:var(--n-color-text);font-size:var(--n-text-sm);vertical-align:middle}.n-dt-th{position:relative;overflow:hidden;background:rgba(0,0,0,.10);color:var(--n-color-text-secondary);font-weight:var(--n-weight-semibold);user-select:none}.n-dt-th.is-sortable{cursor:pointer}.n-dt-th-content{display:flex;align-items:center;justify-content:space-between;gap:0.5rem}.n-dt-sort{display:inline-flex;align-items:center;gap:0.25rem;color:var(--n-color-text-muted)}.n-dt-sort.is-active{color:var(--n-color-primary)}.n-dt-resizer{position:absolute;right:0;top:0;bottom:0;width:8px;cursor:col-resize}.n-dt-filter-row .n-dt-th{background:rgba(0,0,0,.06)}.n-dt-filter{width:100%;max-width:100%;display:block;background:var(--n-color-bg);border:1px solid var(--n-color-border);border-radius:var(--n-radius-sm);padding:0.35rem 0.5rem;color:var(--n-color-text);font-size:var(--n-text-xs);outline:none;box-sizing:border-box}.n-dt-filter:focus{border-color:var(--n-color-primary)}.n-dt-td{background:transparent;color:var(--n-color-text)}.n-dt-row.is-selected .n-dt-td{background:rgba(59,130,246,.12)}.n-dt-table.is-striped .n-dt-row:nth-child(even) .n-dt-td{background:rgba(0,0,0,.06)}.n-dt-table.is-hover .n-dt-row:hover .n-dt-td{background:rgba(255,255,255,.06)}.n-dt-empty{text-align:center;color:var(--n-color-text-muted);padding:1.25rem}.is-left{text-align:left}.is-right{text-align:right}.is-center{text-align:center}.is-selection{width:44px;min-width:44px;max-width:44px;text-align:center}.n-dt-selectbox{width:16px;height:16px;accent-color:var(--n-color-primary)}.n-dt-check{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:4px;border:1px solid var(--n-color-border);color:var(--n-color-primary)}.is-grid .n-dt-td,.is-grid .n-dt-th{border-right:1px solid var(--n-color-border)}.is-grid .n-dt-td:last-child,.is-grid .n-dt-th:last-child{border-right:none}.n-dt-sm .n-dt-th,.n-dt-sm .n-dt-td{padding:0.55rem 0.7rem}.n-dt-lg .n-dt-th,.n-dt-lg .n-dt-td{padding:0.9rem 1rem}`
+injectStyle('data-v-71b71cd6', __style)

package/dist/components/NDataTable.nexa

@@ -0,0 +1,186 @@
+<script setup>
+import { signal, computed, effect } from 'nexa-framework'
+import NPaginator from './NPaginator.nexa'
+const props = defineProps({ value: { type: Array, default: () => [] }, columns: { type: Array, default: () => [] }, stripedRows: { type: Boolean, default: false }, hoverRows: { type: Boolean, default: true }, size: { type: String, default: 'md' }, scrollable: { type: Boolean, default: true }, paginator: { type: Boolean, default: true }, rows: { type: Number, default: 10 }, first: { type: Number, default: 0 }, rowsPerPageOptions: { type: Array, default: () => [10, 20, 50] }, selectionMode: { type: String, default: '' }, selection: { type: null, default: null }, dataKey: { type: String, default: '' }, sortField: { type: String, default: '' }, sortOrder: { type: Number, default: 1 }, resizableColumns: { type: Boolean, default: true }, columnResizeMode: { type: String, default: 'fit' }, filterDisplay: { type: String, default: 'row' }, globalFilter: { type: String, default: '' }, globalFilterFields: { type: Array, default: null }, filters: { type: null, default: null }, lazy: { type: Boolean, default: false }, totalRecords: { type: Number, default: 0 }, emptyMessage: { type: String, default: 'No records found' }, showGridlines: { type: Boolean, default: false } })
+const emit = defineEmits(['update:first', 'update:rows', 'update:selection', 'update:sortField', 'update:sortOrder', 'update:globalFilter', 'update:filters', 'updateFirst', 'updateRows', 'updateSelection', 'updateSortField', 'updateSortOrder', 'updateGlobalFilter', 'updateFilters', 'page', 'rowSelect', 'rowUnselect', 'sort', 'filter'])
+const internalFirst = signal(props.first || 0)
+const internalRows = signal(props.rows || 10)
+const internalSortField = signal(props.sortField || '')
+const internalSortOrder = signal(props.sortOrder || 1)
+const internalFilters = signal((props.filters && typeof props.filters === 'object') ? props.filters : { __global: props.globalFilter || '' })
+const effectiveFilters = computed(() => (props.filters && typeof props.filters === 'object') ? props.filters : internalFilters.value)
+const columnWidths = signal({})
+const resizing = signal(null)
+const internalSelection = signal(props.selection)
+
+effect(() => { internalFirst.value = props.first || 0 })
+effect(() => { internalRows.value = props.rows || 10 })
+effect(() => { internalSortField.value = props.sortField || '' })
+effect(() => { internalSortOrder.value = props.sortOrder || 1 })
+let lastPropGlobal = props.globalFilter || ''
+effect(() => {
+  const next = props.globalFilter || ''
+  if (next === lastPropGlobal) return
+  lastPropGlobal = next
+  if (props.filters && typeof props.filters === 'object') return
+  internalFilters.value = { ...internalFilters.value, __global: next }
+})
+
+let lastPropSelection = props.selection
+effect(() => {
+  const next = props.selection
+  if (next === lastPropSelection) return
+  lastPropSelection = next
+  internalSelection.value = next
+})
+const normalizeColumns = computed(() => (props.columns || []).map((c, idx) => { const field = c.field || `col_${idx}`; const header = c.header ?? field; const sortable = !!c.sortable; const filterable = c.filterable !== false; const type = c.type || 'text'; const width = c.width || ''; const minWidth = c.minWidth || '120px'; const align = c.align || (type === 'number' ? 'right' : 'left'); const filterMatchMode = c.filterMatchMode || 'contains'; return { ...c, field, header, sortable, filterable, type, width, minWidth, align, filterMatchMode } }))
+const getRowKey = (row, index) => (props.dataKey && row && typeof row === 'object' && props.dataKey in row) ? String(row[props.dataKey]) : String(index)
+const effectiveSelection = computed(() => internalSelection.value)
+const isRowSelected = (row, index) => {
+  if (!props.selectionMode) return false
+  const selection = effectiveSelection.value
+  const key = getRowKey(row, index)
+  if (props.selectionMode === 'single') {
+    if (!selection) return false
+    if (props.dataKey && typeof selection === 'object' && selection && props.dataKey in selection) return String(selection[props.dataKey]) === key
+    return selection === row
+  }
+  const current = Array.isArray(selection) ? selection : []
+  if (props.dataKey) return current.some(s => s && typeof s === 'object' && props.dataKey in s && String(s[props.dataKey]) === key)
+  return current.includes(row)
+}
+const toggleRowSelection = (row, index) => {
+  if (!props.selectionMode) return
+  const selected = isRowSelected(row, index)
+  if (props.selectionMode === 'single') {
+    const next = selected ? null : row
+    internalSelection.value = next
+    emit('update:selection', next)
+    emit('updateSelection', next)
+    emit(selected ? 'rowUnselect' : 'rowSelect', { data: row })
+    return
+  }
+  const current = Array.isArray(effectiveSelection.value) ? effectiveSelection.value : []
+  const key = getRowKey(row, index)
+  const next = selected
+    ? (props.dataKey ? current.filter(r => String(r?.[props.dataKey]) !== key) : current.filter(r => r !== row))
+    : [...current, row]
+  internalSelection.value = next
+  emit('update:selection', next)
+  emit('updateSelection', next)
+  emit(selected ? 'rowUnselect' : 'rowSelect', { data: row })
+}
+
+const allVisibleSelected = computed(() => {
+  if (props.selectionMode !== 'multiple') return false
+  const rows = visibleRows.value
+  if (rows.length === 0) return false
+  for (let i = 0; i < rows.length; i++) {
+    if (!isRowSelected(rows[i], i + (internalFirst.value || 0))) return false
+  }
+  return true
+})
+
+const toggleAllVisible = () => {
+  if (props.selectionMode !== 'multiple') return
+  const current = Array.isArray(effectiveSelection.value) ? effectiveSelection.value : []
+  const rows = visibleRows.value
+  const startIndex = internalFirst.value || 0
+  if (rows.length === 0) return
+  if (allVisibleSelected.value) {
+    if (!props.dataKey) {
+      const next = current.filter(r => !rows.includes(r))
+      internalSelection.value = next
+      emit('update:selection', next)
+      emit('updateSelection', next)
+      return
+    }
+    const keys = rows.map((r, i) => getRowKey(r, startIndex + i))
+    const next = current.filter(r => !keys.includes(String(r?.[props.dataKey])))
+    internalSelection.value = next
+    emit('update:selection', next)
+    emit('updateSelection', next)
+    return
+  }
+  if (!props.dataKey) {
+    const next = [...current, ...rows.filter(r => !current.includes(r))]
+    internalSelection.value = next
+    emit('update:selection', next)
+    emit('updateSelection', next)
+    return
+  }
+  const existing = new Set(current.map(r => String(r?.[props.dataKey])))
+  const next = [...current, ...rows.filter((r) => !existing.has(String(r?.[props.dataKey])))]
+  internalSelection.value = next
+  emit('update:selection', next)
+  emit('updateSelection', next)
+}
+const getHeaderContent = (col) => (col.headerTemplate && typeof col.headerTemplate === 'function') ? col.headerTemplate(col) : col.header
+const getRawValue = (row, col) => { if (!row) return ''; if (col.field && typeof row === 'object' && col.field in row) return row[col.field]; return '' }
+const getCellContent = (row, col, index) => { const raw = getRawValue(row, col); if (col.body && typeof col.body === 'function') return col.body(row, { index, column: col, field: col.field, value: raw }); return raw }
+const matchFilter = (value, query, mode) => { const q = String(query ?? '').toLowerCase().trim(); if (!q) return true; const v = String(value ?? '').toLowerCase(); if (mode === 'equals') return v === q; if (mode === 'startsWith') return v.startsWith(q); if (mode === 'endsWith') return v.endsWith(q); return v.includes(q) }
+const filteredRows = computed(() => { const rows = props.value || []; if (props.lazy) return rows; const cols = normalizeColumns.value; const filters = effectiveFilters.value || {}; const global = String(filters.__global || '').trim(); const keys = Object.keys(filters).filter(k => k !== '__global'); if (!global && keys.length === 0) return rows; const globalFields = Array.isArray(props.globalFilterFields) && props.globalFilterFields.length ? props.globalFilterFields : cols.map(c => c.field); return rows.filter((row) => { if (global) { const ok = globalFields.some((f) => matchFilter(getRawValue(row, { field: f }), global, 'contains')); if (!ok) return false } for (const c of cols) { const f = filters[c.field]; if (!f) continue; if (!matchFilter(getRawValue(row, c), f.value, f.matchMode || c.filterMatchMode || 'contains')) return false } return true }) })
+const sortedRows = computed(() => { if (props.lazy) return filteredRows.value; const rows = [...filteredRows.value]; const field = internalSortField.value; if (!field) return rows; const col = normalizeColumns.value.find(c => c.field === field); const order = internalSortOrder.value === -1 ? -1 : 1; const type = col?.type || 'text'; rows.sort((a, b) => { const av = getCellContent(a, { field }, -1); const bv = getCellContent(b, { field }, -1); if (type === 'number') return (Number(av) - Number(bv)) * order; return String(av ?? '').localeCompare(String(bv ?? ''), undefined, { numeric: true, sensitivity: 'base' }) * order }); return rows })
+const totalRecords = computed(() => props.lazy ? (props.totalRecords || (props.value || []).length) : sortedRows.value.length)
+const visibleRows = computed(() => props.lazy ? (props.value || []) : (!props.paginator ? sortedRows.value : sortedRows.value.slice(internalFirst.value || 0, (internalFirst.value || 0) + (internalRows.value || 10))))
+const setSort = (col) => {
+  if (!col.sortable) return
+  const nextField = col.field
+  let nextOrder = 1
+  if (internalSortField.value === nextField) nextOrder = internalSortOrder.value === 1 ? -1 : 1
+  internalSortField.value = nextField
+  internalSortOrder.value = nextOrder
+  internalFirst.value = 0
+  emit('update:sortField', nextField)
+  emit('update:sortOrder', nextOrder)
+  emit('updateSortField', nextField)
+  emit('updateSortOrder', nextOrder)
+  emit('sort', { sortField: nextField, sortOrder: nextOrder })
+}
+const onSortClick = (e) => { const field = e.currentTarget?.dataset?.field; if (!field) return; const col = normalizeColumns.value.find(c => c.field === field); if (!col) return; setSort(col) }
+const setGlobal = (e) => {
+  const next = e.target.value
+  const nextFilters = { ...(effectiveFilters.value || {}), __global: next }
+  if (props.filters && typeof props.filters === 'object') { emit('update:filters', nextFilters); emit('updateFilters', nextFilters) } else { internalFilters.value = nextFilters }
+  internalFirst.value = 0
+  emit('update:globalFilter', next)
+  emit('updateGlobalFilter', next)
+  emit('filter', { global: next, filters: nextFilters })
+}
+const setColumnFilter = (field, e) => { const next = e.target.value; const current = { ...(effectiveFilters.value || {}) }; const col = normalizeColumns.value.find(c => c.field === field); if (!next) delete current[field]; else current[field] = { value: next, matchMode: col?.filterMatchMode || current[field]?.matchMode || 'contains' }; if (props.filters && typeof props.filters === 'object') { emit('update:filters', current); emit('updateFilters', current) } else { internalFilters.value = current } internalFirst.value = 0; emit('filter', { field, value: next, filters: current }) }
+const onColumnFilterInput = (e) => { const field = e.target?.dataset?.field; if (!field) return; setColumnFilter(field, e) }
+const onPage = ({ first, rows }) => {
+  internalFirst.value = first
+  internalRows.value = rows
+  emit('update:first', first)
+  emit('update:rows', rows)
+  emit('updateFirst', first)
+  emit('updateRows', rows)
+  emit('page', { first, rows })
+}
+const getWidth = (col) => columnWidths.value[col.field] || col.width || ''
+const startResize = (e) => { if (!props.resizableColumns) return; const field = e.currentTarget?.dataset?.field; if (!field) return; e.preventDefault(); e.stopPropagation(); const th = e.currentTarget?.parentElement; const base = th?.getBoundingClientRect?.().width || parseFloat(th?.style?.width || '') || 160; resizing.value = { field, startX: e.clientX, startW: base }; const onMove = (ev) => { if (!resizing.value) return; const delta = ev.clientX - resizing.value.startX; const next = Math.max(80, resizing.value.startW + delta); columnWidths.value = { ...columnWidths.value, [resizing.value.field]: `${Math.round(next)}px` } }; const onUp = () => { document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp); resizing.value = null }; document.addEventListener('mousemove', onMove); document.addEventListener('mouseup', onUp) }
+</script>
+
+<template>
+  <div class="n-dt" :class="[`n-dt-${size}`, showGridlines ? 'is-grid' : '', scrollable ? 'is-scroll' : '']">
+    <div class="n-dt-toolbar"><div class="n-dt-global"><input class="n-dt-global-input" :value="effectiveFilters.value.__global || ''" placeholder="Search..." @input="setGlobal" /></div></div>
+    <div class="n-dt-wrapper">
+      <table class="n-dt-table" :class="{ 'is-striped': stripedRows, 'is-hover': hoverRows }">
+        <thead class="n-dt-thead">
+          <tr class="n-dt-head-row"><th v-if="selectionMode" class="n-dt-th is-selection"><input v-if="selectionMode === 'multiple'" class="n-dt-selectbox" type="checkbox" :checked="allVisibleSelected.value" @click.stop="toggleAllVisible" /></th><th v-for="col in normalizeColumns.value" :key="col.field" class="n-dt-th" :class="[`is-${col.align}`, col.sortable ? 'is-sortable' : '']" :style="{ width: getWidth(col) || undefined, minWidth: col.minWidth }" :data-field="col.field" @click="onSortClick"><div class="n-dt-th-content"><span class="n-dt-th-text">{{ getHeaderContent(col) }}</span><span v-if="col.sortable" class="n-dt-sort" :class="{ 'is-active': internalSortField.value === col.field }"><span v-if="internalSortField.value !== col.field" class="n-dt-sort-icon">↕</span><span v-else class="n-dt-sort-icon">{{ internalSortOrder.value === 1 ? '↑' : '↓' }}</span></span></div><span v-if="resizableColumns" class="n-dt-resizer" :data-field="col.field" @mousedown="startResize"></span></th></tr>
+          <tr v-if="filterDisplay === 'row'" class="n-dt-filter-row"><th v-if="selectionMode" class="n-dt-th is-selection"></th><th v-for="col in normalizeColumns.value" :key="col.field" class="n-dt-th" :class="`is-${col.align}`" :style="{ width: getWidth(col) || undefined, minWidth: col.minWidth }"><input v-if="col.filterable" class="n-dt-filter" :data-field="col.field" :value="(effectiveFilters.value[col.field]?.value) || ''" placeholder="Filter" @input="onColumnFilterInput" /></th></tr>
+        </thead>
+        <tbody class="n-dt-tbody">
+          <tr v-for="(row, i) in visibleRows.value" :key="getRowKey(row, i + internalFirst.value)" class="n-dt-row" :class="{ 'is-selected': isRowSelected(row, i + internalFirst.value) }" @click="toggleRowSelection(row, i + internalFirst.value)"><td v-if="selectionMode" class="n-dt-td is-selection"><input class="n-dt-selectbox" type="checkbox" :checked="isRowSelected(row, i + internalFirst.value)" @click.stop="toggleRowSelection(row, i + internalFirst.value)" /></td><td v-for="col in normalizeColumns.value" :key="col.field" class="n-dt-td" :class="`is-${col.align}`" :style="{ width: getWidth(col) || undefined, minWidth: col.minWidth }">{{ getCellContent(row, col, i + internalFirst.value) }}</td></tr>
+          <tr v-if="visibleRows.value.length === 0" class="n-dt-empty-row"><td :colspan="normalizeColumns.value.length + (selectionMode ? 1 : 0)" class="n-dt-empty">{{ emptyMessage }}</td></tr>
+        </tbody>
+      </table>
+    </div>
+    <NPaginator v-if="paginator" :first="internalFirst.value" :rows="internalRows.value" :totalRecords="totalRecords.value" :rowsPerPageOptions="rowsPerPageOptions" @page="onPage" />
+  </div>
+</template>
+
+<style scoped>
+.n-dt{border:1px solid var(--n-color-border);border-radius:var(--n-radius-lg);background:var(--n-color-surface);overflow:hidden;font-family:var(--n-font-sans)}.n-dt-toolbar{display:flex;align-items:center;justify-content:space-between;padding:var(--n-space-3) var(--n-space-4);border-bottom:1px solid var(--n-color-border);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.08))}.n-dt-global{display:flex;align-items:center;gap:var(--n-space-2)}.n-dt-global-input{width:280px;max-width:100%;background:var(--n-color-bg);border:1px solid var(--n-color-border);border-radius:var(--n-radius-md);padding:0.55rem 0.75rem;color:var(--n-color-text);font-size:var(--n-text-sm);outline:none;box-sizing:border-box}.n-dt-global-input:focus{border-color:var(--n-color-primary);box-shadow:0 0 0 3px var(--n-color-primary-light)}.n-dt-wrapper{width:100%;overflow:auto}.n-dt-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.n-dt-thead{background:var(--n-color-surface)}.n-dt-th,.n-dt-td{padding:0.75rem 0.9rem;border-bottom:1px solid var(--n-color-border);color:var(--n-color-text);font-size:var(--n-text-sm);vertical-align:middle}.n-dt-th{position:relative;overflow:hidden;background:rgba(0,0,0,.10);color:var(--n-color-text-secondary);font-weight:var(--n-weight-semibold);user-select:none}.n-dt-th.is-sortable{cursor:pointer}.n-dt-th-content{display:flex;align-items:center;justify-content:space-between;gap:0.5rem}.n-dt-sort{display:inline-flex;align-items:center;gap:0.25rem;color:var(--n-color-text-muted)}.n-dt-sort.is-active{color:var(--n-color-primary)}.n-dt-resizer{position:absolute;right:0;top:0;bottom:0;width:8px;cursor:col-resize}.n-dt-filter-row .n-dt-th{background:rgba(0,0,0,.06)}.n-dt-filter{width:100%;max-width:100%;display:block;background:var(--n-color-bg);border:1px solid var(--n-color-border);border-radius:var(--n-radius-sm);padding:0.35rem 0.5rem;color:var(--n-color-text);font-size:var(--n-text-xs);outline:none;box-sizing:border-box}.n-dt-filter:focus{border-color:var(--n-color-primary)}.n-dt-td{background:transparent;color:var(--n-color-text)}.n-dt-row.is-selected .n-dt-td{background:rgba(59,130,246,.12)}.n-dt-table.is-striped .n-dt-row:nth-child(even) .n-dt-td{background:rgba(0,0,0,.06)}.n-dt-table.is-hover .n-dt-row:hover .n-dt-td{background:rgba(255,255,255,.06)}.n-dt-empty{text-align:center;color:var(--n-color-text-muted);padding:1.25rem}.is-left{text-align:left}.is-right{text-align:right}.is-center{text-align:center}.is-selection{width:44px;min-width:44px;max-width:44px;text-align:center}.n-dt-selectbox{width:16px;height:16px;accent-color:var(--n-color-primary)}.n-dt-check{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:4px;border:1px solid var(--n-color-border);color:var(--n-color-primary)}.is-grid .n-dt-td,.is-grid .n-dt-th{border-right:1px solid var(--n-color-border)}.is-grid .n-dt-td:last-child,.is-grid .n-dt-th:last-child{border-right:none}.n-dt-sm .n-dt-th,.n-dt-sm .n-dt-td{padding:0.55rem 0.7rem}.n-dt-lg .n-dt-th,.n-dt-lg .n-dt-td{padding:0.9rem 1rem}
+</style>