Th Component

Overview

The Th component provides a styled table header cell element for displaying column headers in table structures. It's designed for consistent table header styling and proper alignment within table headers.

Basic Usage

import { th } from '@dashflowx/core'

export default function ThExample() {
  return (
    <th>Header content</th>
  )
}

Preview: Header content

Props

Prop	Type	Default	Description
`className`	`string`	`''`	Additional CSS classes

Examples

Basic Table Header

import { th } from '@dashflowx/core'

export default function BasicTableHeader() {
  return (
    <th>Header content</th>
  )
}

Preview: Header content

Custom Styled Table Header

import { th } from '@dashflowx/core'

export default function CustomStyledTableHeader() {
  return (
    <th className="border border-blue-500 rounded-lg p-4">
      Custom styled header
    </th>
  )
}

Preview: Custom styled header

Table Header with Sort

import { th } from '@dashflowx/core'

export default function TableHeaderWithSort() {
  return (
    <th>
      <button className="flex items-center space-x-1">
        <span>Name</span>
        <span>↕</span>
      </button>
    </th>
  )
}

Preview: <button className="flex items-center space-x-1"><span>Name</span><span>↕</span></button>

Table Header with Filter

import { th } from '@dashflowx/core'

export default function TableHeaderWithFilter() {
  return (
    <th>
      <div className="flex items-center space-x-2">
        <span>Status</span>
        <select className="text-xs">
          <option>All</option>
          <option>Active</option>
          <option>Inactive</option>
        </select>
      </div>
    </th>
  )
}

Preview: <div className="flex items-center space-x-2"><span>Status</span><select className="text-xs"><option>All</option><option>Active</option><option>Inactive</option></select></div>

Table Header with Actions

import { th } from '@dashflowx/core'

export default function TableHeaderWithActions() {
  return (
    <th>
      Actions
    </th>
  )
}

Preview: Actions

Common Use Cases

Data Table Header

const dataTableHeader = (
  <th>Data Column</th>
);

User Table Header

const userTableHeader = (
  <th>User Name</th>
);

Status Header

const statusHeader = (
  <th>Status</th>
);

Action Header

const actionHeader = (
  <th>Actions</th>
);

Best Practices

1. Clear Headers

Use clear and descriptive header labels.

// ✅ Good - Clear headers
<th>Full Name</th>
<th>Email Address</th>

// ❌ Avoid - Unclear headers
<th>Name</th>
<th>Email</th>

2. Consistent Styling

Maintain consistent styling across table headers.

// ✅ Good - Consistent styling
<th className="standard-header-style">Header</th>

// ❌ Avoid - Inconsistent styling
<th className="random-styles">Header</th>

3. Proper Alignment

Use appropriate alignment for different data types.

// ✅ Good - Proper alignment
<th className="text-right">Price</th> // Numbers
<th className="text-left">Name</th> // Text

// ❌ Avoid - Poor alignment
<th>Price</th>
<th>Name</th>

4. Accessible Headers

Ensure table headers are accessible to all users.

// ✅ Good - Accessible
<th scope="col">Header</th>

// ❌ Avoid - Not accessible
<th>Header</th>

5. Consistent Height

Maintain consistent height across headers.

// ✅ Good - Consistent height
<th className="h-12">Header</th>

// ❌ Avoid - Inconsistent height
<th className="h-8">Header</th>

Customization

Custom Styling

You can customize the table header appearance using CSS classes:

<th className="border border-gray-300 rounded-lg p-4" />

Different Themes

Use different themes for different contexts:

// Light theme
<th className="bg-white border-gray-200" />

// Dark theme
<th className="bg-gray-900 border-gray-700 text-white" />

// Brand theme
<th className="bg-blue-50 border-blue-200" />

Size Variations

Use different sizes for different emphasis levels:

// Small header
<th className="text-sm h-8" />

// Standard header
<th className="text-base h-12" />

// Large header
<th className="text-lg h-16" />

Advanced Usage

Dynamic Header Content

Load header content dynamically:

const [headerContent, setHeaderContent] = useState('');

useEffect(() => {
  // Load content from API
  loadHeaderContent().then(setHeaderContent);
}, []);

Sortable Headers

Implement sortable headers:

const [sortConfig, setSortConfig] = useState({ key: null, direction: 'asc' });

const handleSort = (key) => {
  setSortConfig({ key, direction: sortConfig.direction === 'asc' ? 'desc' : 'asc' });
};

<th onClick={() => handleSort('name')}>
  <button className="flex items-center space-x-1">
    <span>Name</span>
    <span>{sortConfig.key === 'name' ? (sortConfig.direction === 'asc' ? '↑' : '↓') : '↕'}</span>
  </button>
</th>

Filterable Headers

Add filtering functionality to headers:

<th>
  <div className="flex items-center space-x-2">
    <span>Status</span>
    <select onChange={(e) => handleFilter(e.target.value)}>
      <option value="">All</option>
      <option value="active">Active</option>
      <option value="inactive">Inactive</option>
    </select>
  </div>
</th>

Td: For table cells
Tr: For table rows
Table: For table containers
Button: For header actions
Select: For header filters

API Reference

For the complete API reference and advanced usage patterns, see the Th API documentation.