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
defaultCellWidth	String	'1fr'	Default width for table cells (used when header doesn't specify width)
async	Boolean	false	If true, all user actions (sort, filter) will be emitted instead of handled internally
sort	Object	null	Sort state from parent (can be updated dynamically). Format: { sortBy: 'key', sortOrder: 'asc' | 'desc' }
filters	Object	{}	Filter state from parent (can be updated dynamically). Format: { headerKey: [selectedValues], ... }
allowSelect	Boolean	false	Enable row selection with checkboxes
selected	Array	[]	Selected rows from parent (can be updated dynamically)
rowKey	String	'_id'	Key to use for row identification

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., 'left-align', 'center-align', 'right-align')
headerClasses	String	No	CSS classes to apply to the header cell (e.g., 'left-align', 'center-align', 'right-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
filterable	Boolean	No	Whether this column can be filtered
filter	Array	No	Array of filter options. Format: [{ text: 'Option 1', value: 'value1' }, ...]
render	Function	No	Function to transform the cell value before display. Receives rowData as parameter

Events

Event	Payload	Description
cellClicked	(rowData, cell)	Emitted when a table cell is clicked
scrolledToEndInTable	-	Emitted when user scrolls to the end (infinite scroll)
onSort	{ header, sortBy: String | null, sortOrder: 'asc' | 'desc' | null }	Emitted when sorting is triggered (async mode only)
onFilter	{ headerKey: [selectedValues], ... }	Emitted when filter values change (async mode only)
onSelect	Array<rowData>	Emitted when row selection changes

Slots

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

Header Slots

Slot Name	Props	Description
header-{key}	{ header, sortState, filterState }	Custom header content for column with key {key}

Cell Slots

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

Filter Slots

Slot Name	Props	Description
filter-{key}	{ header, selectedValues, onFilterToggle, isOptionSelected, clearFilters, closeMenu }	Custom filter menu content for column with key {key}

Footer Slot

Slot Name	Props	Description
footer	-	Custom footer content below the table

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
• Three states: none → asc → desc → none

Server-side Sorting (async mode)

• Emits onSort event with sort parameters
• Parent component handles data fetching and sorting
• Maintains sort state visually
• Accepts sort prop to update sort state from parent

Filtering Behavior

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

Client-side Filtering (default)

• Automatically filters data when async is false
• Uses checkbox-based filter menus
• Supports multiple filter values per column
• Filters are combined with AND logic (all active filters must match)

Server-side Filtering (async mode)

• Emits onFilter event when filter values change
• Parent component handles data fetching and filtering
• Accepts filters prop to update filter state from parent
• Format: { headerKey: [selectedValues], ... }

Selection Behavior

Row selection works with checkboxes:

• Select All: Checkbox in header to select/deselect all rows
• Individual Selection: Checkbox per row
• Indeterminate State: Shows when some (but not all) rows are selected
• Emits onSelect event with array of selected row data
• Accepts selected prop to update selection from parent
• Uses rowKey prop to identify rows (default: '_id')

Dependencies

The Table component depends on:

• OScrollObserver component for infinite scroll functionality
• OMenu component for filter menus
• OCheckbox component for row selection
• Vue 3 with Composition API

Example Usage

<template>
  <OTable 
    :headers="headers"
    :tableData="data"
    :async="true"
    :sort="sortState"
    :filters="filterState"
    :allowSelect="true"
    :selected="selectedRows"
    :rowKey="'_id'"
    @cellClicked="handleCellClick"
    @scrolledToEndInTable="loadMoreData"
    @onSort="handleSort"
    @onFilter="handleFilter"
    @onSelect="handleSelect"
  >
    <!-- Custom cell rendering for the "action" column -->
    <template #cell-action="{ rowData }">
      <button @click="editItem(rowData)">Edit</button>
    </template>
    
    <!-- Custom header rendering -->
    <template #header-name="{ header }">
      <div class="custom-header">{{ header.text }}</div>
    </template>

    <!-- Custom filter content -->
    <template #filter-category="{ header, selectedValues, onFilterToggle, clearFilters }">
      <div class="custom-filter">
        <!-- Your custom filter UI -->
      </div>
    </template>
  </OTable>
</template>

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

const headers = [
  { 
    text: "Name", 
    key: "name", 
    classes: "left-align", 
    sortable: true, 
    width: "200px" 
  },
  { 
    text: "Email", 
    key: "email",
    filterable: true,
    filter: [
      { text: "Gmail", value: "gmail.com" },
      { text: "Yahoo", value: "yahoo.com" }
    ]
  },
  { 
    text: "Actions", 
    key: "action", 
    headerClasses: "right-align", 
    width: "150px" 
  }
]

const data = ref([
  { _id: '1', name: "John Doe", email: "john@gmail.com" },
  { _id: '2', name: "Jane Smith", email: "jane@yahoo.com" }
])

const sortState = ref({ sortBy: null, sortOrder: null })
const filterState = ref({})
const selectedRows = ref([])

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

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

const handleSort = ({ header, sortBy, sortOrder }) => {
  // Handle sorting on the server
  sortState.value = { sortBy, sortOrder }
  console.log('Sort by:', sortBy, 'Direction:', sortOrder)
}

const handleFilter = (filters) => {
  // Handle filtering on the server
  filterState.value = filters
  console.log('Filters:', filters)
}

const handleSelect = (selected) => {
  selectedRows.value = selected
  console.log('Selected rows:', selected)
}

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