Table API Reference

Props

Prop	Type	Default	Description
headers	Array	[]	Array of header objects that define the table columns (required)
tableData	Array	[]	Array of data objects to be displayed in the table (required)
enableHover	Boolean	true	Enables or disables the hover effect on table rows
enableInfiniteScroll	Boolean	true	Enables or disables the infinite scroll functionality
enablePagination	Boolean	false	Enables or disables pagination
itemsPerPage	Number	10	Number of items per page when pagination is enabled
currentPage	Number	1	Current page number when pagination is enabled
totalItems	Number	0	Total number of items for pagination
async	Boolean	false	If true, all user actions (sort, pagination) will be emitted instead of handled internally
isAlternateRowColored	Boolean	false	Enables alternating row background colors
isAlternateColumnColored	Boolean	false	Enables alternating column background colors
defaultCellWidth	String	'1fr'	Default width for table cells (used when header doesn't specify width)

Header Object Structure

Each header object in the headers array should have the following structure:

Property	Type	Required	Description
text	String	Yes	Display text for the header
key	String	Yes	Key that matches the data object properties
classes	String	No	CSS classes to apply to cells in this column (e.g., 'center', 'right-align', 'left-align')
headerClasses	String	No	CSS classes to apply to the header cell (e.g., 'center', 'right-align', 'left-align')
sortable	Boolean	No	Whether this column can be sorted
width	String	No	Custom width for the column (e.g., '200px', '2fr'). Uses defaultCellWidth if not provided
enableCopy	Boolean	No	Enables copy to clipboard functionality for cells in this column
domFunc	Function	No	Function to transform the cell value before display

Events

Event	Payload	Description
cellClicked	(rowData, cell)	Emitted when a table cell is clicked
scrolledToEndInTable	-	Emitted when user scrolls to the end (infinite scroll)
onTableCellKeyDown	(event, rowData, cell)	Emitted when a key is pressed on a table cell
onTableCellBlur	(rowData, cell)	Emitted when a table cell loses focus
onSort	{ key: String, direction: 'asc' | 'desc' }	Emitted when sorting is triggered (async mode only)
onPageChange	pageNumber	Emitted when page is changed (async mode only)

Slots

The table component provides slots for customizing header and cell content:

Header Slots

Slot Name	Props	Description
header-{key}	{ cell: Object }	Custom header content for column with key {key}

Cell Slots

Slot Name	Props	Description
cell-{key}	{ rowData: Object, cell: Object, tableCellClicked: Function }	Custom cell content for column with key {key}

Methods

The component doesn't expose any methods via template refs, but provides internal methods for:

• Sorting: handleSort(header) - Handles column sorting
• Pagination: handlePageChange(page) - Handles page navigation
• Cell Events: tableCellClicked(data, cell) - Handles cell clicks
• Infinite Scroll: handelLoadMoreData() - Triggers load more data
• Keyboard Events: onTableCellKeyDown(event, rowData, cell) - Handles keydown events
• Focus Events: onTableCellBlur(event, rowData, cell) - Handles blur events

CSS Classes

The component uses the following CSS classes that can be customized:

Class	Description
.table-wrapper	Main container for the table
.hover-enabled	Applied to rows when hover is enabled
.alternate-row-colored	Applied to rows when alternate row coloring is enabled
.alternate-column-colored	Applied to rows when alternate column coloring is enabled
.sortable	Applied to sortable header cells
.sorted-asc	Applied to ascending sorted column
.sorted-desc	Applied to descending sorted column
.left-align	Left-aligns text
.center-align	Centers text alignment
.right-align	Right-aligns text
.copy-enabled	Applied to cells when copy functionality is enabled
.pagination	Pagination container
.pagination-button	Pagination navigation buttons
.page-info	Page information display

Sorting Behavior

The table supports both client-side and server-side sorting:

Client-side Sorting (default)

• Automatically sorts data when async is false
• Supports numerical and string comparison
• Handles null/undefined values gracefully
• Case-insensitive string sorting

Server-side Sorting (async mode)

• Emits onSort event with sort parameters
• Parent component handles data fetching and sorting
• Maintains sort state visually

Pagination Behavior

Pagination works in two modes:

Client-side Pagination (default)

• Automatically paginates data when enablePagination is true and async is false
• Uses itemsPerPage and currentPage props
• Calculates totalPages automatically

Server-side Pagination (async mode)

• Emits onPageChange event when page changes
• Parent component handles data fetching
• Requires totalItems prop for page calculation

Dependencies

The Table component depends on:

• OScrollObserver component for infinite scroll functionality
• Vue 3 with Composition API

Example Usage

<template>
  <OTable 
    :headers="headers"
    :tableData="data"
    :enablePagination="true"
    :itemsPerPage="5"
    :currentPage="currentPage"
    :totalItems="totalItems"
    :async="true"
    @cellClicked="handleCellClick"
    @scrolledToEndInTable="loadMoreData"
    @onSort="handleSort"
    @onPageChange="handlePageChange"
  >
    <!-- Custom cell rendering for the "action" column -->
    <template #cell-action="{ rowData }">
      <button @click="editItem(rowData)">Edit</button>
    </template>
    
    <!-- Custom header rendering -->
    <template #header-name="{ cell }">
      <div class="custom-header">{{ cell.text }}</div>
    </template>
  </OTable>
</template>

<script setup>
import { ref } from 'vue'

const headers = [
  { text: "Name", key: "name", classes: "center", sortable: true, width: "200px" },
  { text: "Email", key: "email", enableCopy: true },
  { text: "Actions", key: "action", headerClasses: "right", width: "150px" }
]

const data = ref([
  { name: "John Doe", email: "john@example.com" },
  { name: "Jane Smith", email: "jane@example.com" }
])

const currentPage = ref(1)
const totalItems = ref(100)

const handleCellClick = (rowData, cell) => {
  console.log('Cell clicked:', rowData, cell)
}

const loadMoreData = () => {
  // Fetch more data and append to the data array
}

const handleSort = ({ key, direction }) => {
  // Handle sorting on the server
  console.log('Sort by:', key, 'Direction:', direction)
}

const handlePageChange = (page) => {
  // Handle page change on the server
  currentPage.value = page
}

const editItem = (item) => {
  // Handle edit action
}
</script>