Table Container

A comprehensive table component system for displaying structured data. The table is composed of multiple components working together: TableContainer (wrapper), TableHeader (header row), TableHeaderCell (header cells), TableRow (data rows), and TableCell (data cells).

Example Table

ID
Name
Email
Role
1
John Doe
john@example.com
Developer
2
Jane Smith
jane@example.com
Designer
3
Bob Johnson
bob@example.com
Product Manager
4
Alice Williams
alice@example.com
Engineer

Component Interfaces

Table Container

interface TableContainerProps{
		children: React.ReactNode;
}

Table Header

interface TableHeaderProps{
		children: React.ReactNode;
}

Table Header Cell

interface TableHeaderCellProps {
  children: React.ReactNode;
  width?: string;      // e.g., '200px', '25%', 'auto'
  minWidth?: string;   // Minimum width constraint
  align?: 'left' | 'center' | 'right';  // Text alignment (default: 'left')
}

Table Row

interface TableRowProps{
		children: React.ReactNode;
}

Table Cell

interface TableCellProps {
  children: React.ReactNode;
  width?: string;      // e.g., '200px', '25%', 'auto'
  minWidth?: string;   // Minimum width constraint
  align?: 'left' | 'center' | 'right';  // Text alignment (default: 'left')
}

Usage Example

import TableContainer from 'oneslash-design-system/components/tableContainer';
import TableHeader from 'oneslash-design-system/components/tableHeader';
import TableHeaderCell from 'oneslash-design-system/components/tableHeaderCell';
import TableRow from 'oneslash-design-system/components/tableRow';
import TableCell from 'oneslash-design-system/components/tableCell';

function UserTable({ users }) {
  return (
    <TableContainer>
      <TableHeader>
        <TableRow>
          <TableHeaderCell>Name</TableHeaderCell>
          <TableHeaderCell>Email</TableHeaderCell>
          <TableHeaderCell>Role</TableHeaderCell>
        </TableRow>
      </TableHeader>
      {users.map((user) => (
        <TableRow key={user.id}>
          <TableCell>{user.name}</TableCell>
          <TableCell>{user.email}</TableCell>
          <TableCell>{user.role}</TableCell>
        </TableRow>
      ))}
    </TableContainer>
  );
}