Getting Started

Welcome to the DocBits Component Library! This guide will help you get started with the comprehensive table components and documentation.

Overview

DocBits provides a complete enterprise-grade table system built with Vue 3. The component library includes:

• 6 core components for building powerful data tables
• Design system with colors, typography, and spacing tokens
• Interactive demos for exploring component features
• Comprehensive tests with 100+ test cases
• Dark mode support for modern applications
• Full accessibility support (WCAG 2.1 AA)

Installation

Prerequisites

• Node.js 18+ (Check with node --version)
• npm 9+ (Check with npm --version)

Clone the Repository

git clone https://github.com/Fellow-Consulting-AG/DocBits_Component.git
cd DocBits_Component

Install Dependencies

npm install

Running the Documentation Site

Development Server

Start the development server with hot reload:

npm run docs:dev

Then open http://localhost:5173 in your browser.

Production Build

Build the documentation site for production:

npm run docs:build

Preview Production Build

Preview the production build locally:

npm run docs:preview

Exploring Components

1. Component Overview

Start by exploring the Components section to see all available components.

Each component page includes:

• Overview - Purpose and use cases
• Props API - All available props with types
• Events API - Emitted events and payloads
• Basic Usage - Simple code examples
• Interactive Demos - Live component playgrounds
• Advanced Examples - Complex usage patterns
• Testing - Testing strategies and examples
• Accessibility - Keyboard navigation and ARIA support

2. Interactive Demos

The most engaging way to learn is through interactive demos:

• Props Panel - Toggle props in real-time
• Event Logger - See all emitted events
• Code Examples - Copy-ready code snippets
• Dark Mode Toggle - Test both themes

3. Design System

Understand the visual foundation:

• Colors - Brand colors and palette
• Typography - Font system and text styles
• Dark Mode - Dark theme implementation

Component Quick Reference

Table Components

DocBitsTable

The main unified table component with all features:

• ✅ Sorting
• ✅ Filtering
• ✅ Pagination
• ✅ Row selection
• ✅ Bulk actions
• ✅ Column resizing

View Documentation

ColumnOrderBy

Sort indicator component for table headers:

• Clickable sort arrows
• Active/inactive states
• Client and server-side sorting modes

View Documentation

RowSelectionCheckbox

Checkbox component for row selection:

• Individual row selection
• Master checkbox with indeterminate state
• Full keyboard support

View Documentation

BulkActionsMenu

Floating action button for bulk operations:

• Export selected rows
• Delete selected rows
• Copy row IDs to clipboard

View Documentation

RowActionsMenu

Three-dot menu for per-row actions:

• View details
• Copy ID or message
• Export as JSON
• Delete row

View Documentation

UnifiedTable

Alternative unified table implementation:

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

View Documentation

Common Tasks

Using DocBitsTable in Your Project

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

<script setup lang="ts">
import { ref } from 'vue'

const columns = [
  { name: 'id', label: 'ID', field: 'id', sortable: true },
  { name: 'name', label: 'Document', field: 'name', sortable: true },
  { name: 'status', label: 'Status', field: 'status' }
]

const documents = ref([
  { id: 1, name: 'Invoice_001.pdf', status: 'Processed' },
  { id: 2, name: 'Receipt_001.pdf', status: 'Pending' }
])

function handleRowClick(row) {
  console.log('Row clicked:', row)
}

function handleSelection(selected) {
  console.log('Selected rows:', selected)
}
</script>

Implementing Column Sorting

<template>
  <ColumnOrderBy
    column="name"
    :current-sort="sortColumn"
    :current-direction="sortDirection"
    @sort="handleSort"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import ColumnOrderBy from '@/components/Table/ColumnOrderBy.vue'

const sortColumn = ref(null)
const sortDirection = ref(null)

function handleSort({ column, direction }) {
  sortColumn.value = column
  sortDirection.value = direction
  // Perform sorting...
}
</script>

Adding Row Selection

<template>
  <div>
    <RowSelectionCheckbox
      row-id="master"
      :is-master="true"
      :is-selected="allSelected"
      :total-rows="items.length"
      :selected-count="selectedCount"
      @toggle-all="toggleSelectAll"
    />

    <RowSelectionCheckbox
      v-for="item in items"
      :key="item.id"
      :row-id="item.id"
      :is-selected="selectedRows.has(item.id)"
      @toggle="toggleRow"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import RowSelectionCheckbox from '@/components/Table/RowSelectionCheckbox.vue'

const items = ref([
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' }
])

const selectedRows = ref(new Set())

const selectedCount = computed(() => selectedRows.value.size)
const allSelected = computed(
  () => selectedCount.value === items.value.length
)

function toggleRow(rowId, isSelected) {
  if (isSelected) {
    selectedRows.value.add(rowId)
  } else {
    selectedRows.value.delete(rowId)
  }
}

function toggleSelectAll(isSelected) {
  selectedRows.value.clear()
  if (isSelected) {
    items.value.forEach(item => selectedRows.value.add(item.id))
  }
}
</script>

Keyboard Navigation

All components support full keyboard navigation:

Key	Action
Tab	Navigate to next element
Shift+Tab	Navigate to previous element
Enter	Activate button or select checkbox
Space	Toggle checkbox
Arrow Up/Down	Navigate rows

Dark Mode

Components automatically support dark mode through CSS variables:

/* Light mode (default) */
:root {
  --q-primary: #2388AE;
  --dashboard-table-header-bg: #ffffff;
}

/* Dark mode */
body.dark {
  --q-primary: #34eea9;
  --dashboard-table-header-bg: #292929;
}

Testing

The component library includes comprehensive tests:

# Run all tests
npm run test

# Run tests once
npm run test:unit

# Run tests with coverage
npm run test:coverage

See the Testing section for detailed testing patterns and examples.

Next Steps

1. Explore Components - Browse the Components section
2. Try Demos - Use the interactive demos to understand features
3. Read Tests - Check the Testing docs for testing patterns
4. Copy Examples - Use code examples as a starting point

Help & Support

• Questions? Check the FAQ below
• Found a bug? Open an issue
• Want to contribute? See Contributing

FAQ

Q: Can I use these components outside of DocBits? A: Yes! The components are independent and can be used in any Vue 3 application.

Q: Do the components require Quasar? A: Currently, the components use some Quasar utilities. We're working on reducing this dependency.

Q: Is TypeScript required? A: No, but we recommend it for better IDE support and type safety.

Q: How do I customize the styling? A: All styling uses CSS variables. Override them in your application CSS.

Q: Where can I find the component source code? A: The source code is in the src/components/Table/ directory.

Contributing

We welcome contributions! Please see our contributing guidelines in the GitHub repository.

---

Ready to dive in? Start with the Components section!