Skip to Content
Dashflow Logo

Table Component

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

Overview

The Table component provides a structured way to display tabular data with proper styling and responsive behavior. It's designed for data tables, comparison tables, and any structured information display.

Basic Usage

import { table } from '@dashflowx/core'


export default function TableExample() {
  return (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
          <th>Role</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John Doe</td>
          <td>john@example.com</td>
          <td>Admin</td>
        </tr>
        <tr>
          <td>Jane Smith</td>
          <td>jane@example.com</td>
          <td>User</td>
        </tr>
      </tbody>
    </table>
  )
}

Preview:

NameEmailRole
John Doejohn@example.comAdmin
Jane Smithjane@example.comUser

Props

PropTypeDefaultDescription
classNamestring''Additional CSS classes

Examples

Basic Table

import { table } from '@dashflowx/core'


export default function BasicTable() {
  return (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
          <th>Role</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John Doe</td>
          <td>john@example.com</td>
          <td>Admin</td>
        </tr>
        <tr>
          <td>Jane Smith</td>
          <td>jane@example.com</td>
          <td>User</td>
        </tr>
      </tbody>
    </table>
  )
}

Preview:

NameEmailRole
John Doejohn@example.comAdmin
Jane Smithjane@example.comUser

Custom Styled Table

import { table } from '@dashflowx/core'


export default function CustomStyledTable() {
  return (
    <table className="border border-blue-500 rounded-lg p-4">
      <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
          <th>Role</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John Doe</td>
          <td>john@example.com</td>
          <td>Admin</td>
        </tr>
        <tr>
          <td>Jane Smith</td>
          <td>jane@example.com</td>
          <td>User</td>
        </tr>
      </tbody>
    </table>
  )
}

Preview:

NameEmailRole
John Doejohn@example.comAdmin
Jane Smithjane@example.comUser

Data Table

import { table } from '@dashflowx/core'


export default function DataTable() {
  const data = [
    { name: 'John Doe', email: 'john@example.com', role: 'Admin' },
    { name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
    { name: 'Bob Johnson', email: 'bob@example.com', role: 'User' }
  ];


  return (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
          <th>Role</th>
        </tr>
      </thead>
      <tbody>
        {data.map((row, index) => (
          <tr key={index}>
            <td>{row.name}</td>
            <td>{row.email}</td>
            <td>{row.role}</td>
          </tr>
        ))}
      </tbody>
    </table>
  )
}

Comparison Table

import { table } from '@dashflowx/core'


export default function ComparisonTable() {
  return (
    <table>
      <thead>
        <tr>
          <th>Feature</th>
          <th>Basic Plan</th>
          <th>Pro Plan</th>
          <th>Enterprise Plan</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Storage</td>
          <td>5GB</td>
          <td>50GB</td>
          <td>Unlimited</td>
        </tr>
        <tr>
          <td>Users</td>
          <td>1</td>
          <td>10</td>
          <td>Unlimited</td>
        </tr>
        <tr>
          <td>Support</td>
          <td>Email</td>
          <td>Priority</td>
          <td>24/7</td>
        </tr>
      </tbody>
    </table>
  )
}

Common Use Cases

User Management Table

const userManagementTable = (
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Role</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>john@example.com</td>
        <td>Admin</td>
        <td>
          <button>Edit</button>
          <button>Delete</button>
        </td>
      </tr>
    </tbody>
  </table>
);

Product Comparison

const productComparison = (
  <table>
    <thead>
      <tr>
        <th>Feature</th>
        <th>Product A</th>
        <th>Product B</th>
        <th>Product C</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Price</td>
        <td>$99</td>
        <td>$199</td>
        <td>$299</td>
      </tr>
    </tbody>
  </table>
);

Financial Data

const financialData = (
  <table>
    <thead>
      <tr>
        <th>Month</th>
        <th>Revenue</th>
        <th>Expenses</th>
        <th>Profit</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>January</td>
        <td>$10,000</td>
        <td>$7,000</td>
        <td>$3,000</td>
      </tr>
    </tbody>
  </table>
);

Inventory Table

const inventoryTable = (
  <table>
    <thead>
      <tr>
        <th>Product</th>
        <th>SKU</th>
        <th>Stock</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Laptop</td>
        <td>LAP001</td>
        <td>25</td>
        <td>$999</td>
      </tr>
    </tbody>
  </table>
);

Best Practices

1. Clear Headers

Use clear and descriptive table headers.

// ✅ Good - Clear headers
<thead>
  <tr>
    <th>Full Name</th>
    <th>Email Address</th>
    <th>User Role</th>
  </tr>
</thead>


// ❌ Avoid - Unclear headers
<thead>
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th>Role</th>
  </tr>
</thead>

2. Consistent Data

Maintain consistent data formatting across rows.

// ✅ Good - Consistent formatting
<tbody>
  <tr>
    <td>John Doe</td>
    <td>john@example.com</td>
    <td>Admin</td>
  </tr>
</tbody>


// ❌ Avoid - Inconsistent formatting
<tbody>
  <tr>
    <td>John Doe</td>
    <td>john@example.com</td>
    <td>admin</td>
  </tr>
</tbody>

3. Responsive Design

Make tables responsive for different screen sizes.

// ✅ Good - Responsive
<table className="w-full overflow-x-auto" />


// ❌ Avoid - Fixed width
<table className="w-96" />

4. Accessible Tables

Ensure tables are accessible to all users.

// ✅ Good - Accessible
<table>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Email</th>
    </tr>
  </thead>
</table>


// ❌ Avoid - Not accessible
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>
</table>

5. Proper Styling

Use proper styling for better readability.

// ✅ Good - Proper styling
<table className="border-collapse border border-gray-300" />


// ❌ Avoid - Poor styling
<table />

Customization

Custom Styling

You can customize the table appearance using CSS classes:

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

Different Themes

Use different themes for different contexts:

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


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


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

Size Variations

Use different sizes for different emphasis levels:

// Small table
<table className="text-sm" />


// Standard table
<table className="text-base" />


// Large table
<table className="text-lg" />

Advanced Usage

Dynamic Table Data

Load table data dynamically:

const [tableData, setTableData] = useState([]);


useEffect(() => {
  // Load data from API
  loadTableData().then(setTableData);
}, []);

Sortable Columns

Implement sortable columns:

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


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

Filterable Tables

Add filtering functionality:

const [filter, setFilter] = useState('');


const filteredData = data.filter(item => 
  item.name.toLowerCase().includes(filter.toLowerCase())
);
  • Td: For table cells
  • Th: For table headers
  • Tr: For table rows
  • Card: For table containers
  • Button: For table actions

API Reference

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

Edit this page on GitHub
previousCopy Button