AdoptionTable

AdoptionTable component: sortable, filterable table of tracked features showing adoption status, usage count, and trends

Overview

AdoptionTable displays all features in a sortable table with status badges, use counts, and timestamps.

Basic Usage

import { AdoptionTable } from '@tour-kit/adoption'

<AdoptionTable />

Props

Prop

Type

Examples

Sorted Table

<AdoptionTable sortBy="useCount" sortOrder="desc" />

With Row Click

<AdoptionTable
  onRowClick={(feature) => {
    console.log('Clicked:', feature.name)
    // Navigate to feature details, etc.
  }}
/>

Show All Columns

<AdoptionTable
  showCategory
  showPriority
/>

Filtered Features

import { useAdoptionStats } from '@tour-kit/adoption'

function ChurnedFeaturesTable() {
  const { byStatus } = useAdoptionStats()

  return (
    <div>
      <h2>Churned Features</h2>
      <AdoptionTable features={byStatus.churned} />
    </div>
  )
}

Table Columns

Default columns:

Name: Feature name
Status: Adoption status badge
Uses: Total use count
Last Used: Relative time (e.g., "2 days ago")

Optional columns:

Category: Feature category (if showCategory={true})
Priority: Numeric priority (if showPriority={true})

Accessibility

The table includes:

Semantic <table> element
<caption> for screen readers
Sortable column headers with aria-sort
Row selection with keyboard

<AdoptionTable
  aria-label="Feature adoption table"
  caption="Current adoption status for all features"
/>

Next Steps

AdoptionStatusBadge - Status badges
useAdoptionStats - Filter data

AdoptionTable

On this page