Table Component Showcase

Introduction

The Table component is versatile and supports different styles and configurations. Below are examples showcasing different table types.

Usage Examples

Basic Table

NameAgeOccupation
John Doe28Software Engineer
Jane Smith34Product Manager
Sam Brown22Designer

import Table from '../../components/Table'; 

const BasicTable: React.FC = () => {
  const columns = ['Name', 'Age', 'Occupation'];
  const data = [
    { Name: 'John Doe', Age: 28, Occupation: 'Software Engineer' },
    { Name: 'Jane Smith', Age: 34, Occupation: 'Product Manager' },
    { Name: 'Sam Brown', Age: 22, Occupation: 'Designer' },
  ];

  return <Table columns={columns} data={data} variant="basic" />;
};

export default BasicTable;

Striped Table

NameAgeOccupation
John Doe28Software Engineer
Jane Smith34Product Manager
Sam Brown22Designer

import Table from '../../components/Table'; 

const StripedTable: React.FC = () => {
  const columns = ['Name', 'Age', 'Occupation'];
  const data = [
    { Name: 'John Doe', Age: 28, Occupation: 'Software Engineer' },
    { Name: 'Jane Smith', Age: 34, Occupation: 'Product Manager' },
    { Name: 'Sam Brown', Age: 22, Occupation: 'Designer' },
  ];

  return <Table columns={columns} data={data} variant="striped" />;
};

export default StripedTable;

Expandable Table

NameAgeOccupation
John Doe28Software Engineer
Jane Smith34Product Manager
Sam Brown22Designer
Expanded Content for Row 3

import Table from '../../components/Table'; 

const ExpandableTable: React.FC = () => {
  const columns = ['Name', 'Age', 'Occupation'];
  const data = [
    { Name: 'John Doe', Age: 28, Occupation: 'Software Engineer' },
    { Name: 'Jane Smith', Age: 34, Occupation: 'Product Manager' },
    { Name: 'Sam Brown', Age: 22, Occupation: 'Designer' },
  ];

  return (
    <Table
      columns={columns}
      data={data}
      variant="expandable"
      expandable
      onRowExpand={(rowIndex) => console.log('Expanded row:', rowIndex)}
    />
  );
};

export default ExpandableTable;