Table Components

Welcome to the DocBits Table Components documentation! This comprehensive guide covers all 6 core table components that make up the DocBits data table system.

Overview

The DocBits table system provides enterprise-grade table components built with Vue 3. These components work together to create powerful, flexible data tables with sorting, filtering, selection, pagination, and bulk operations.

Component Architecture

The table system uses a modular approach:

DocBitsTable (Main Unified Table)
├── ColumnOrderBy (Sort Indicators)
├── RowSelectionCheckbox (Row Selection)
├── BulkActionsMenu (Bulk Operations FAB)
└── RowActionsMenu (Per-Row Actions)

Plus an alternative:

• UnifiedTable - Simplified unified table implementation

Components at a Glance

1. DocBitsTable

The main unified table component with all features

• Sorting, filtering, pagination
• Row selection (single and multi-select)
• Bulk actions for multiple rows
• Per-row action menus
• Resizable columns
• Dark mode support
• Full accessibility

Best for: Complete data tables with all features

View Documentation →

2. ColumnOrderBy

Sort arrow indicators for table column headers

• Clickable sort arrows (up/down)
• Active/inactive states
• Client and server-side sorting modes
• Compact CSS-based arrows
• Keyboard accessible

Best for: Adding sort functionality to table headers

View Documentation →

3. RowSelectionCheckbox

Checkbox component for row selection

• Individual row checkboxes
• Master checkbox with indeterminate state
• Support for select all / deselect all
• Aria labels and screen reader support
• Full keyboard navigation

Best for: Implementing row selection UI

View Documentation →

4. BulkActionsMenu

Floating Action Button for bulk operations

• Shows when rows are selected
• Export selected rows
• Delete selected rows
• Copy row IDs to clipboard
• Selection counter badge
• Clear selection button

Best for: Bulk operations on multiple selected rows

View Documentation →

5. RowActionsMenu

Three-dot menu for per-row actions

• Dropdown menu for individual rows
• View details action
• Copy ID or message
• Export as JSON
• Delete row (conditional)
• Tooltip support

Best for: Individual row operations

View Documentation →

6. UnifiedTable

Alternative unified table implementation

• Similar to DocBitsTable
• Simplified feature set
• Lighter weight option
• Same core API

Best for: Simpler table requirements, lighter bundle size

View Documentation →

Feature Comparison Matrix

Feature	DocBitsTable	UnifiedTable	ColumnOrderBy	RowSelectionCheckbox	BulkActionsMenu	RowActionsMenu
Sorting	✅	✅	✅	-	-	-
Filtering	✅	✅	-	-	-	-
Pagination	✅	✅	-	-	-	-
Row Selection	✅	✅	-	✅	-	-
Bulk Actions	✅	✅	-	-	✅	-
Row Actions	✅	✅	-	-	-	✅
Column Resizing	✅	-	-	-	-	-
Dark Mode	✅	✅	✅	✅	✅	✅
Accessible	✅	✅	✅	✅	✅	✅
Responsive	✅	✅	✅	✅	✅	✅

Using Components Together

Complete Table Implementation

For a complete table with all features, use DocBitsTable which integrates all other components:

<template>
  <DocBitsTable
    :rows="documents"
    :columns="columns"
    row-key="id"
    :features="{
      selection: true,
      sorting: true,
      pagination: true,
      bulkActions: true,
      rowActions: true
    }"
    @row-click="handleRowClick"
    @selection-change="handleSelection"
  />
</template>

<script setup lang="ts">
const columns = [
  { name: 'id', label: 'ID', field: 'id', sortable: true },
  { name: 'name', label: 'Document', field: 'name', sortable: true },
  { name: 'status', label: 'Status', field: 'status' }
]

// ... component logic
</script>

Custom Table Implementation

Combine individual components for custom requirements:

<template>
  <div class="custom-table">
    <!-- Header with sort -->
    <div class="header">
      <div>
        ID
        <ColumnOrderBy
          column="id"
          :current-sort="sortColumn"
          :current-direction="sortDirection"
          @sort="handleSort"
        />
      </div>
      <div>
        <RowSelectionCheckbox
          row-id="master"
          :is-master="true"
          :is-selected="allSelected"
          @toggle-all="toggleSelectAll"
        />
      </div>
    </div>

    <!-- Bulk actions FAB -->
    <BulkActionsMenu
      :selected-count="selectedRows.size"
      @export="handleExport"
      @delete="handleDelete"
    />

    <!-- Table rows with selection and actions -->
    <div v-for="row in rows" :key="row.id" class="row">
      <RowSelectionCheckbox
        :row-id="row.id"
        :is-selected="selectedRows.has(row.id)"
        @toggle="toggleRow"
      />
      <span>{{ row.id }}</span>
      <RowActionsMenu
        :row-id="row.id"
        @view="handleView"
        @delete="handleDelete"
      />
    </div>
  </div>
</template>

Design Principles

1. Modularity

Each component can be used independently or combined for custom solutions.

2. Accessibility

All components include:

• Full keyboard navigation
• ARIA labels and roles
• Screen reader support
• Focus indicators
• Color contrast (WCAG AA)

3. Responsive

Components adapt to mobile, tablet, and desktop:

• Touch-friendly interaction sizes
• Flexible layouts
• Optimized for all screen sizes

4. Themeable

All components use CSS variables for theming:

• Light and dark modes included
• Easy to customize
• Color system with semantic tokens

5. Type Safe

Full TypeScript support:

• Interfaces for all props and events
• IntelliSense support
• Type-safe component composition

Common Patterns

Pattern 1: Server-Side Data Loading

<script setup lang="ts">
const loading = ref(false)
const rows = ref([])
const pagination = ref({
  page: 1,
  rowsPerPage: 10,
  rowsNumber: 0
})

async function onRequest(newPagination) {
  loading.value = true
  try {
    const { data, total } = await fetchDocuments({
      page: newPagination.page,
      limit: newPagination.rowsPerPage
    })
    rows.value = data
    pagination.value.rowsNumber = total
  } finally {
    loading.value = false
  }
}
</script>

Pattern 2: Dynamic Column Selection

<script setup lang="ts">
const visibleColumns = ref(['id', 'name', 'status'])

const columns = computed(() =>
  allColumns.filter(col => visibleColumns.value.includes(col.name))
)

function toggleColumn(columnName) {
  const index = visibleColumns.value.indexOf(columnName)
  if (index > -1) {
    visibleColumns.value.splice(index, 1)
  } else {
    visibleColumns.value.push(columnName)
  }
}
</script>

Pattern 3: Export Selection

<script setup lang="ts">
async function handleExport() {
  const selectedData = rows.value.filter(row =>
    selectedRows.value.has(row.id)
  )
  const csv = convertToCSV(selectedData)
  downloadFile(csv, 'export.csv')
}
</script>

Testing

All components are thoroughly tested with:

• 100+ unit tests
• 60+ component tests
• Full coverage of edge cases
• Real-world scenario tests

See the Testing section for testing patterns and examples.

Performance

The components are optimized for performance:

• Virtual scrolling for large datasets (1000+ rows)
• Lazy loading support
• Debounced operations
• Minimal re-renders
• Efficient event handling

Benchmark: 10,000 rows render in <100ms with virtual scrolling

Browser Support

Browser	Version
Chrome	Latest 2 versions
Firefox	Latest 2 versions
Safari	Latest 2 versions
Edge	Latest 2 versions

Next Steps

Choose a component to explore:

1. New to the system? Start with DocBitsTable
2. Need sorting? See ColumnOrderBy
3. Adding selection? Check RowSelectionCheckbox
4. Bulk operations? Review BulkActionsMenu
5. Row actions? Explore RowActionsMenu
6. Simpler table? Try UnifiedTable

---

Related Resources

• Design System - Colors, typography, and themes
• Testing - Testing strategies and patterns
• Getting Started - Installation and setup