Td Component

Overview

The Td component provides a styled table cell element for displaying data in table rows. It's designed for consistent table cell styling and proper alignment within table structures.

Basic Usage

import { td } from '@dashflowx/core'

export default function TdExample() {
  return (
    <td>Cell content</td>
  )
}

Preview: Cell content

Props

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

Examples

Basic Table Cell

import { td } from '@dashflowx/core'

export default function BasicTableCell() {
  return (
    <td>Cell content</td>
  )
}

Preview: Cell content

Custom Styled Table Cell

import { td } from '@dashflowx/core'

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

Preview: Custom styled cell

Table Cell with Data

import { td } from '@dashflowx/core'

export default function TableCellWithData() {
  return (
    <td>
      John Doe
    </td>
  )
}

Preview: John Doe

Table Cell with Number

import { td } from '@dashflowx/core'

export default function TableCellWithNumber() {
  return (
    <td>
      25
    </td>
  )
}

Preview: 25

Table Cell with Status

import { td } from '@dashflowx/core'

export default function TableCellWithStatus() {
  return (
    <td>
      <span className="px-2 py-1 text-xs bg-green-100 text-green-800 rounded">
        Active
      </span>
    </td>
  )
}

Preview: <span className="px-2 py-1 text-xs bg-green-100 text-green-800 rounded">Active</span>

Common Use Cases

Data Table Cell

const dataTableCell = (
  <td>Data value</td>
);

User Information Cell

const userInfoCell = (
  <td>john@example.com</td>
);

Status Cell

const statusCell = (
  <td>
    <span className="status-badge">Active</span>
  </td>
);

Action Cell

const actionCell = (
  <td>
    <button>Edit</button>
    <button>Delete</button>
  </td>
);

Best Practices

1. Consistent Styling

Maintain consistent styling across table cells.

// ✅ Good - Consistent styling
<td className="standard-cell-style">Content</td>

// ❌ Avoid - Inconsistent styling
<td className="random-styles">Content</td>

2. Proper Alignment

Use appropriate alignment for different data types.

// ✅ Good - Proper alignment
<td className="text-right">$100.00</td> // Numbers
<td className="text-left">John Doe</td> // Text

// ❌ Avoid - Poor alignment
<td>$100.00</td>
<td>John Doe</td>

3. Accessible Content

Ensure table cell content is accessible.

// ✅ Good - Accessible
<td>Clear content</td>

// ❌ Avoid - Not accessible
<td></td>

4. Appropriate Content

Provide appropriate content for table cells.

// ✅ Good - Appropriate content
<td>Relevant data</td>

// ❌ Avoid - Inappropriate content
<td>Random text</td>

5. Consistent Padding

Maintain consistent padding across cells.

// ✅ Good - Consistent padding
<td className="p-4">Content</td>

// ❌ Avoid - Inconsistent padding
<td className="p-2">Content</td>

Customization

Custom Styling

You can customize the table cell appearance using CSS classes:

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

Different Themes

Use different themes for different contexts:

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

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

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

Size Variations

Use different sizes for different emphasis levels:

// Small cell
<td className="text-sm p-2" />

// Standard cell
<td className="text-base p-4" />

// Large cell
<td className="text-lg p-6" />

Advanced Usage

Dynamic Cell Content

Load cell content dynamically:

const [cellContent, setCellContent] = useState('');

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

Conditional Cell Content

Show different content based on conditions:

const getCellContent = (status) => {
  if (status === 'active') {
    return <span className="text-green-600">Active</span>;
  }
  return <span className="text-red-600">Inactive</span>;
};

Cell with Actions

Add actions to table cells:

<td>
  <div className="flex space-x-2">
    <button>Edit</button>
    <button>Delete</button>
  </div>
</td>

Th: For table headers
Tr: For table rows
Table: For table containers
Button: For cell actions
Badge: For status indicators

API Reference

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