Skip to Content
Dashflow Logo

Tr Component

A comprehensive guide to using the Tr component with examples, props, and best practices.

Overview

The Tr component provides a styled table row element for organizing table cells into rows. It's designed for consistent table row styling and proper spacing within table structures.

Basic Usage

import { tr } from '@dashflowx/core'


export default function TrExample() {
  return (
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
    </tr>
  )
}

Preview: <td>Cell 1</td><td>Cell 2</td><td>Cell 3</td>

Props

PropTypeDefaultDescription
classNamestring''Additional CSS classes

Examples

Basic Table Row

import { tr } from '@dashflowx/core'


export default function BasicTableRow() {
  return (
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
    </tr>
  )
}

Preview: <td>Cell 1</td><td>Cell 2</td><td>Cell 3</td>

Custom Styled Table Row

import { tr } from '@dashflowx/core'


export default function CustomStyledTableRow() {
  return (
    <tr className="border border-blue-500 rounded-lg p-4">
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
    </tr>
  )
}

Preview: <td>Cell 1</td><td>Cell 2</td><td>Cell 3</td>

Table Row with Data

import { tr } from '@dashflowx/core'


export default function TableRowWithData() {
  return (
    <tr>
      <td>John Doe</td>
      <td>john@example.com</td>
      <td>Admin</td>
    </tr>
  )
}

Preview: <td>John Doe</td><td>john@example.com</td><td>Admin</td>

Table Row with Actions

import { tr } from '@dashflowx/core'


export default function TableRowWithActions() {
  return (
    <tr>
      <td>John Doe</td>
      <td>john@example.com</td>
      <td>Admin</td>
      <td>
        <button>Edit</button>
        <button>Delete</button>
      </td>
    </tr>
  )
}

Preview: <td>John Doe</td><td>john@example.com</td><td>Admin</td><td><button>Edit</button><button>Delete</button></td>

Table Row with Status

import { tr } from '@dashflowx/core'


export default function TableRowWithStatus() {
  return (
    <tr>
      <td>John Doe</td>
      <td>john@example.com</td>
      <td>Admin</td>
      <td>
        <span className="px-2 py-1 text-xs bg-green-100 text-green-800 rounded">
          Active
        </span>
      </td>
    </tr>
  )
}

Preview: <td>John Doe</td><td>john@example.com</td><td>Admin</td><td><span className="px-2 py-1 text-xs bg-green-100 text-green-800 rounded">Active</span></td>

Common Use Cases

Data Table Row

const dataTableRow = (
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
);

User Table Row

const userTableRow = (
  <tr>
    <td>John Doe</td>
    <td>john@example.com</td>
    <td>Admin</td>
  </tr>
);

Product Table Row

const productTableRow = (
  <tr>
    <td>Laptop</td>
    <td>$999</td>
    <td>25</td>
  </tr>
);

Order Table Row

const orderTableRow = (
  <tr>
    <td>#12345</td>
    <td>John Doe</td>
    <td>$99.99</td>
    <td>Completed</td>
  </tr>
);

Best Practices

1. Consistent Styling

Maintain consistent styling across table rows.

// ✅ Good - Consistent styling
<tr className="standard-row-style">Content</tr>


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

2. Proper Cell Count

Ensure consistent cell count across rows.

// ✅ Good - Consistent cell count
<tr>
  <td>Cell 1</td>
  <td>Cell 2</td>
  <td>Cell 3</td>
</tr>


// ❌ Avoid - Inconsistent cell count
<tr>
  <td>Cell 1</td>
  <td>Cell 2</td>
</tr>

3. Accessible Rows

Ensure table rows are accessible to all users.

// ✅ Good - Accessible
<tr>Content</tr>


// ❌ Avoid - Not accessible
<div>Row content</div>

4. Appropriate Content

Provide appropriate content for table rows.

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


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

5. Consistent Spacing

Maintain consistent spacing across rows.

// ✅ Good - Consistent spacing
<tr className="border-t">Content</tr>


// ❌ Avoid - Inconsistent spacing
<tr className="border-t-2">Content</tr>

Customization

Custom Styling

You can customize the table row appearance using CSS classes:

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

Different Themes

Use different themes for different contexts:

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


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


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

Size Variations

Use different sizes for different emphasis levels:

// Small row
<tr className="text-sm" />


// Standard row
<tr className="text-base" />


// Large row
<tr className="text-lg" />

Advanced Usage

Dynamic Row Content

Load row content dynamically:

const [rowContent, setRowContent] = useState([]);


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

Conditional Row Styling

Apply different styles based on conditions:

const getRowStyle = (status) => {
  if (status === 'active') {
    return 'bg-green-50';
  }
  return 'bg-red-50';
};


<tr className={getRowStyle(status)}>
  <td>Content</td>
</tr>

Row with Actions

Add actions to table rows:

<tr>
  <td>John Doe</td>
  <td>john@example.com</td>
  <td>
    <div className="flex space-x-2">
      <button>Edit</button>
      <button>Delete</button>
    </div>
  </td>
</tr>
  • Td: For table cells
  • Th: For table headers
  • Table: For table containers
  • Button: For row actions
  • Badge: For status indicators

API Reference

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

Edit this page on GitHub
previousTable Header