import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
import {
  PlaygroundTable,
  DoWithSearch,
  DoWithoutSearch,
  DoWithFilters,
  DoWithoutFilters,
  DoWithCustomActions,
  DoWithActionIcons,
  DoWithSearchAndFilters,
  DoWithSearchFiltersAndActions,
  DoWithRowSelection,
} from '../../components/table/BmsTable.stories.js';

<Meta title="Documentation/Layout/Table" />

# <img src="../BmsIcon.png" /> Table

Table is a comprehensive component for displaying structured data in rows and columns. It provides powerful features including search, filtering, sorting, pagination, and row selection. Tables are essential for displaying large amounts of data in an organized and interactive way, allowing users to find, filter, and manipulate information efficiently.

## Anatomy

Table components consist of several key elements: column headers (with optional sorting), data rows, a search bar (optional), filter controls (optional), custom action buttons (optional), pagination controls, and selection checkboxes (when selectable). The table can display data in normal or dense mode, and supports various interaction patterns.

## Component

Use the controls below to interact with the component and see how it behaves with different configurations.

<Canvas of={PlaygroundTable} />

### Props

<Controls of={PlaygroundTable} />

## Usage Examples

### ✅ Do: Table with search

Enable search functionality when users need to quickly find specific data within the table. The search bar allows users to filter rows by any column value.

<Canvas of={DoWithSearch} />

### ✅ Do: Table without search

Disable search when the table contains a small amount of data or when search functionality is not needed. This simplifies the interface and reduces visual clutter.

<Canvas of={DoWithoutSearch} />

### ✅ Do: Table with filters

Use filters when users need to filter data by specific criteria (e.g., status, category, date range). Filters provide more precise control than search and are ideal for structured filtering.

<Canvas of={DoWithFilters} />

### ✅ Do: Table without filters

Omit filters when the data doesn't require structured filtering or when the table is simple enough that search alone is sufficient.

<Canvas of={DoWithoutFilters} />

### ✅ Do: Table with custom actions

Add custom action tags when users need quick filter options or preset filters. Tags provide a visual way to apply common filters automatically. Custom actions appear in the table header.

<Canvas of={DoWithCustomActions} />

### ✅ Do: Table with action icons

Add action icons (edit, delete, etc.) in a dedicated actions column when users need to perform actions on individual rows. Action icons provide quick access to row-level operations.

<Canvas of={DoWithActionIcons} />

### ✅ Do: Table with search and filters

Combine search and filters when users need both quick text search and structured filtering. This provides maximum flexibility for finding and organizing data.

<Canvas of={DoWithSearchAndFilters} />

### ✅ Do: Table with search, filters and actions

Use all three features (search, filters, and actions) when the table is complex and users need comprehensive data management capabilities.

<Canvas of={DoWithSearchFiltersAndActions} />

### ✅ Do: Table with row selection

Enable row selection when users need to select one or multiple rows to perform actions on them. Selection checkboxes appear in the first column, and selected rows are highlighted.

<Canvas of={DoWithRowSelection} />

## Rules

### When to use search

- **Use search** when users need to quickly find specific text across multiple columns
- **Don't use search** when the table is very small (fewer than 10 rows) or when filtering by specific criteria is more appropriate

### When to use filters

- **Use filters** when users need to filter by specific structured criteria (status, category, date ranges, etc.)
- **Don't use filters** when the data is simple and search alone is sufficient, or when filtering would add unnecessary complexity

### When to use custom actions

- **Use custom actions** when users need quick filter options or preset filters. Tags are ideal for common filter presets that users frequently apply
- **Don't use custom actions** when no quick filters are needed or when all filtering can be handled through the filter panel

### When to use row selection

- **Use row selection** when users need to select one or multiple rows to perform actions on them (delete, export, bulk edit, etc.)
- **Don't use row selection** when no bulk operations are needed or when actions should be performed individually on each row
