ItcTable (@itcroja/itc-table)

Table of Contents

• Description
• Features
• Package structure
• Requirements
• Installation
• Example
• Props
• Events
• Slots
• Row clicks (Quasar note)
• Exports & constants
• Development (package maintainers)

Description

A Vue 3 + Quasar data table component built on QTable. It exposes familiar props (rows, columns, pagination, selection) with optional prop aliases for different app styles, forwards all QTable slots and non-prop attributes, and supports server-driven pagination via the request event.

Internals are split into src/types/ and src/composables/ so DataTable.vue stays a thin shell over QTable.

Features

• ✅ Quasar QTable under the hood
• ✅ Prop aliases for row data (rows / data / taskList / collectionData), visible columns (visibleColumns / customColumns), pagination (pagination / paginationData)
• ✅ Server-side pagination & sorting via @request and update:pagination
• ✅ Row selection (selection, selected, update:selected)
• ✅ Slot passthrough — any QTable slot works on <DataTable>
• ✅ inheritAttrs: false with v-bind="$attrs" so extra attributes reach QTable
• ✅ Row click bridge — Quasar only wires row clicks when onRowClick is set; the component supplies it when you use clickableRows and/or @row-click
• ✅ TypeScript — TableColumn, TablePagination from src/types/table.ts (re-exported from the package entry)
• ✅ Global registration — itcTable plugin registers DataTable and ItcDataTable
• ✅ Boilerplate-friendly chrome — hideBottomSeparator, alignPaginationStart, headerEmphasis (replaces repeated :deep(.q-table__bottom…) CSS in many apps)

Package structure

| Path | Role | |------|------| | src/components/DataTable.vue | SFC: props, template (QTable), scoped chrome CSS | | src/types/table.ts | TableColumn, TablePagination | | src/composables/useAliasRows.ts | Resolve row array from prop aliases | | src/composables/useVisibleColumnNames.ts | visibleColumns / customColumns | | src/composables/useInternalPagination.ts | Internal v-model:pagination, @request | | src/composables/useQuasarRowClickBridge.ts | onRowClick stub / attrs for @row-click | | src/composables/useTableRowClassFn.ts | table-row-class-fn (pointer + highlight) | | src/composables/useTableRootClass.ts | Root classes .itc-data-table--* | | src/consts.ts | Default rows-per-page options | | src/plugin.ts | app.use(itcTable) |

Requirements

• Vue 3.x
• Quasar 2.x
• Node.js 20.19+ or 22.12+

Installation

This package is hosted in a GitLab registry. Ensure your project has access to the registry; otherwise npm will try to resolve the package from the public npm registry.

npm install @itcroja/itc-table

Styles

Optional table chrome (hideBottomSeparator, alignPaginationStart, headerEmphasis) is shipped as a separate CSS file. Import it once in your app entry (e.g. main.ts or a Quasar boot file):

import '@itcroja/itc-table/dist/itc-table.css'

Example

<script setup lang="ts">
import { ref } from 'vue'
import { DataTable } from '@itcroja/itc-table'
import type { TableColumn } from '@itcroja/itc-table'

const columns: TableColumn[] = [
  { name: 'id', label: 'ID', field: 'id', align: 'left', sortable: true },
  { name: 'name', label: 'Name', field: 'name', align: 'left' },
  { name: 'email', label: 'Email', field: 'email', align: 'left' }
]

const rows = ref([
  { id: 1, name: 'John Doe', email: '[email protected]' },
  { id: 2, name: 'Jane Smith', email: '[email protected]' }
])
</script>

<template>
  <DataTable
    :rows="rows"
    :columns="columns"
    row-key="id"
  />
</template>

Global registration (plugin)

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { itcTable } from '@itcroja/itc-table'

const app = createApp(App)
app.use(itcTable) // registers <DataTable> and <ItcDataTable> globally
app.mount('#app')

Quasar CLI: you can add a boot file that calls app.use(itcTable) (same as above).

Prop aliases

<DataTable
  :task-list="tasks"
  :custom-columns="shownCols"
  :pagination-data="pagination"
  :columns="columns"
  @request="onRequest"
/>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | rows / data / taskList / collectionData | any[] | [] | Row data; first non-undefined among these props wins. Implemented in useAliasRows. | | columns | TableColumn[] | (required) | Column definitions (Quasar column shape). Types in src/types/table.ts. | | rowKey | string | 'id' | Unique key field per row. | | pagination / paginationData | TablePagination | internal default | Pagination state (page, rowsPerPage, rowsNumber, sortBy, descending). | | visibleColumns / customColumns | string[] | — | Column name values to show. | | loading | boolean | false | Loading overlay. | | flat | boolean | true | QTable flat style. | | bordered | boolean | false | QTable bordered. | | square | boolean | false | QTable square corners. | | separator | string | 'horizontal' | 'horizontal' | 'vertical' | 'cell' | 'none'. | | dense | boolean | false | Dense table. | | hidePagination | boolean | false | Hide pagination controls. | | hideBottom | boolean | false | Hide entire bottom area. | | wrapCells | boolean | false | Wrap cell content. | | selection | string | 'none' | 'none' | 'single' | 'multiple'. | | selected | any[] | [] | Selected rows; use with @update:selected. | | clickableRows | boolean | false | When true, rows get cursor-pointer (pair with @row-click). | | highlightedRowKey | string \| number \| null | null | Highlights the row whose row[rowKey] matches (e.g. the row open in an edit dialog). Uses Quasar utility class from highlightedRowClass. | | highlightedRowClass | string | 'bg-grey-3' | Row class when the key matches (boilerplate active-row look). | | hideBottomSeparator | boolean | false | Hides the vertical rule in the pagination bar (CardsTable / AgentsIndex pattern). | | alignPaginationStart | boolean | false | justify-content: flex-start on .q-table__bottom. | | headerEmphasis | boolean | false | Bold header + light gray thead background (AgentsIndex my-table pattern). |

Additional props (binaryStateSort, rowsPerPageOptions, virtualScroll, noDataLabel, noResultsLabel, loadingLabel, title, hideHeader, dark, filter, grid, gridHeader, tableClass, cardClass, tableStyle, etc.) are passed through to QTable. See src/components/DataTable.vue defineProps for the full list and defaults.

Prop examples

Server-side pagination

<DataTable
  :rows="rows"
  :columns="columns"
  :pagination-data="pagination"
  @request="onRequest"
/>

import type { TablePagination } from '@itcroja/itc-table'

const pagination = ref({
  page: 1,
  rowsPerPage: 25,
  rowsNumber: 100,
  sortBy: 'id',
  descending: true
})

function onRequest ({ pagination: p }: { pagination: TablePagination }) {
  pagination.value = { ...pagination.value, ...p }
  // fetch rows from API…
}

Events

| Event | Payload | Description | |-------|---------|-------------| | request | { pagination, filter?, getCellValue? } | Emitted when QTable requests data (page / sort / filter); use for server-side mode. | | update:pagination | TablePagination | Pagination object updated (also driven internally). | | update:selected | any[] | Selection changed when selection is not 'none'. | | row-click | (evt: Event, row: any, index: number) | Same as Quasar QTable @row-click — open edit dialog, navigate to detail, etc. |

Slots

| Slot | Description | |------|-------------| | (dynamic) | All QTable slots are forwarded. For example: #body-cell-<name>, #top, #bottom, #no-data, etc. Use the same slot names as in Quasar QTable. |

<DataTable :rows="rows" :columns="columns">
  <template #body-cell-name="props">
    <q-td :props="props">
      <strong>{{ props.value }}</strong>
    </q-td>
  </template>
</DataTable>

Row click + highlight (card table style)

Use clickable-rows (and optionally highlighted-row-key) with hide-bottom-separator, align-pagination-start, header-emphasis to match common boilerplate tables:

<DataTable
  :rows="rows"
  :columns="columns"
  clickable-rows
  :highlighted-row-key="editOpen ? editingId : null"
  hide-bottom-separator
  align-pagination-start
  header-emphasis
  @row-click="(_, row) => openEdit(row)"
/>

Row clicks (Quasar note)

QTable only attaches row click handlers when the onRowClick prop is defined. A parent @row-click listener does not become that prop automatically. DataTable sets onRowClick when clickableRows is true and/or the parent listens for @row-click, then re-emits row-click for your handler.

Exports & constants

Exports

import {
  DataTable,
  itcTable,
  DEFAULT_ROWS_PER_PAGE_OPTIONS,
  DEFAULT_ROWS_PER_PAGE
} from '@itcroja/itc-table'

import type { TableColumn, TablePagination } from '@itcroja/itc-table'

Types are defined in src/types/table.ts and exported from the package index (you can still import type … from '@itcroja/itc-table').

Constants

Default page size options live in src/consts.ts (DEFAULT_ROWS_PER_PAGE, DEFAULT_ROWS_PER_PAGE_OPTIONS).

Development (package maintainers)

This section is for developing the package itself (not consumers).

Clone

git clone <repo-url>
cd table-view

Install

npm install

Build

npm run build

Watch build during development

npm run dev