> ## Documentation Index
> Fetch the complete documentation index at: https://memberpulseptyltd.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Tables & Datagrids

> MemberPulse table and datagrid patterns for displaying structured data

# Tables & Datagrids

Tables display structured data in rows and columns. They support sorting, filtering, pagination, and row actions.

***

## Basic Table

| Name          | Email                                         | Role   | Status  |
| ------------- | --------------------------------------------- | ------ | ------- |
| John Smith    | [john@example.com](mailto:john@example.com)   | Admin  | Active  |
| Sarah Johnson | [sarah@example.com](mailto:sarah@example.com) | Member | Active  |
| Mike Wilson   | [mike@example.com](mailto:mike@example.com)   | Member | Pending |
| Emma Davis    | [emma@example.com](mailto:emma@example.com)   | Member | Expired |

***

## Table Styling

### Header Styles

| Property       | Value                      |
| -------------- | -------------------------- |
| Background     | `var(--muted)` / `#F5F5F7` |
| Text Color     | `var(--foreground)`        |
| Font Weight    | 600 (Semibold)             |
| Font Size      | 12px / 0.75rem             |
| Text Transform | Uppercase                  |
| Letter Spacing | 0.05em                     |
| Padding        | `0.75rem 1rem`             |

### Row Styles

| Property      | Value                           |
| ------------- | ------------------------------- |
| Background    | `var(--background)` / `#FFFFFF` |
| Alternate Row | `var(--muted)` / `#F8F8FA`      |
| Border        | `1px solid var(--border)`       |
| Padding       | `0.75rem 1rem`                  |
| Font Size     | 14px / 0.875rem                 |

### Hover State

| Property   | Value                         |
| ---------- | ----------------------------- |
| Background | `var(--accent)` / `#F0F7FF`   |
| Transition | `background-color 0.15s ease` |

***

## Table with Actions

<Card>
  <div style={{overflowX: 'auto'}}>
    <table style={{width: '100%', borderCollapse: 'collapse', fontSize: '14px'}}>
      <thead>
        <tr style={{backgroundColor: '#F5F5F7', borderBottom: '1px solid #E2E8F0'}}>
          <th style={{padding: '12px 16px', textAlign: 'left', fontWeight: '600', fontSize: '12px', textTransform: 'uppercase', letterSpacing: '0.05em'}}>Member</th>
          <th style={{padding: '12px 16px', textAlign: 'left', fontWeight: '600', fontSize: '12px', textTransform: 'uppercase', letterSpacing: '0.05em'}}>Plan</th>
          <th style={{padding: '12px 16px', textAlign: 'left', fontWeight: '600', fontSize: '12px', textTransform: 'uppercase', letterSpacing: '0.05em'}}>Status</th>
          <th style={{padding: '12px 16px', textAlign: 'right', fontWeight: '600', fontSize: '12px', textTransform: 'uppercase', letterSpacing: '0.05em'}}>Actions</th>
        </tr>
      </thead>

      <tbody>
        <tr style={{borderBottom: '1px solid #E2E8F0'}}>
          <td style={{padding: '12px 16px'}}>
            <div style={{display: 'flex', alignItems: 'center', gap: '12px'}}>
              <div style={{width: '32px', height: '32px', borderRadius: '0', backgroundColor: '#2421C4', color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '12px', fontWeight: '600'}}>JS</div>

              <div>
                <div style={{fontWeight: '500'}}>John Smith</div>
                <div style={{fontSize: '12px', color: '#6C757D'}}>[john@example.com](mailto:john@example.com)</div>
              </div>
            </div>
          </td>

          <td style={{padding: '12px 16px'}}>Professional</td>

          <td style={{padding: '12px 16px'}}>
            <span style={{backgroundColor: '#ECFDF5', color: '#065F46', padding: '4px 12px', borderRadius: '0', fontSize: '12px', fontWeight: '500'}}>Active</span>
          </td>

          <td style={{padding: '12px 16px', textAlign: 'right'}}>
            <span style={{color: '#2421C4', cursor: 'pointer', marginRight: '12px'}}>Edit</span>
            <span style={{color: '#DC3545', cursor: 'pointer'}}>Delete</span>
          </td>
        </tr>

        <tr style={{borderBottom: '1px solid #E2E8F0', backgroundColor: '#F8F8FA'}}>
          <td style={{padding: '12px 16px'}}>
            <div style={{display: 'flex', alignItems: 'center', gap: '12px'}}>
              <div style={{width: '32px', height: '32px', borderRadius: '0', backgroundColor: '#10B981', color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '12px', fontWeight: '600'}}>SJ</div>

              <div>
                <div style={{fontWeight: '500'}}>Sarah Johnson</div>
                <div style={{fontSize: '12px', color: '#6C757D'}}>[sarah@example.com](mailto:sarah@example.com)</div>
              </div>
            </div>
          </td>

          <td style={{padding: '12px 16px'}}>Basic</td>

          <td style={{padding: '12px 16px'}}>
            <span style={{backgroundColor: '#FFFBEB', color: '#92400E', padding: '4px 12px', borderRadius: '0', fontSize: '12px', fontWeight: '500'}}>Pending</span>
          </td>

          <td style={{padding: '12px 16px', textAlign: 'right'}}>
            <span style={{color: '#2421C4', cursor: 'pointer', marginRight: '12px'}}>Edit</span>
            <span style={{color: '#DC3545', cursor: 'pointer'}}>Delete</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</Card>

***

## Table Features

### Sorting

<AccordionGroup>
  <Accordion title="Sort Indicators" icon="arrow-up-down">
    * Clickable column headers for sortable columns
    * Up arrow (↑) for ascending order
    * Down arrow (↓) for descending order
    * Neutral indicator for unsorted columns
    * Multi-column sort with Shift+click
  </Accordion>

  <Accordion title="Implementation" icon="code">
    ```jsx theme={null}
    <th onClick={() => handleSort('name')}>
      Name
      {sortColumn === 'name' && (
        sortDirection === 'asc' ? <ArrowUp /> : <ArrowDown />
      )}
    </th>
    ```
  </Accordion>
</AccordionGroup>

### Filtering

<Card>
  <div style={{padding: '16px', borderBottom: '1px solid #E2E8F0', display: 'flex', gap: '12px', flexWrap: 'wrap'}}>
    <div style={{backgroundColor: '#F5F5F7', border: '1px solid #E2E8F0', borderRadius: '0', padding: '8px 12px', fontSize: '14px', display: 'flex', alignItems: 'center', gap: '8px'}}>
      🔍 <span style={{color: '#6C757D'}}>Search members...</span>
    </div>

    <div style={{backgroundColor: '#F5F5F7', border: '1px solid #E2E8F0', borderRadius: '0', padding: '8px 12px', fontSize: '14px', display: 'flex', alignItems: 'center', gap: '8px'}}>
      Status: All ▼
    </div>

    <div style={{backgroundColor: '#F5F5F7', border: '1px solid #E2E8F0', borderRadius: '0', padding: '8px 12px', fontSize: '14px', display: 'flex', alignItems: 'center', gap: '8px'}}>
      Plan: All ▼
    </div>
  </div>
</Card>

**Filter Types:**

* **Global search:** Search across all columns
* **Column filters:** Filter specific columns
* **Date range:** Filter by date ranges
* **Multi-select:** Select multiple filter values

### Pagination

<Card>
  <div style={{padding: '16px', borderTop: '1px solid #E2E8F0', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '12px'}}>
    <div style={{fontSize: '14px', color: '#6C757D'}}>
      Showing 1-10 of 156 results
    </div>

    <div style={{display: 'flex', gap: '8px', alignItems: 'center'}}>
      <span style={{fontSize: '14px', color: '#6C757D'}}>Rows per page:</span>
      <div style={{backgroundColor: '#F5F5F7', border: '1px solid #E2E8F0', borderRadius: '0', padding: '4px 8px', fontSize: '14px'}}>10 ▼</div>

      <div style={{display: 'flex', gap: '4px'}}>
        <div style={{backgroundColor: '#F5F5F7', border: '1px solid #E2E8F0', borderRadius: '0', padding: '4px 12px', fontSize: '14px', cursor: 'pointer'}}>←</div>
        <div style={{backgroundColor: '#2421C4', color: 'white', borderRadius: '0', padding: '4px 12px', fontSize: '14px'}}>1</div>
        <div style={{backgroundColor: '#F5F5F7', border: '1px solid #E2E8F0', borderRadius: '0', padding: '4px 12px', fontSize: '14px', cursor: 'pointer'}}>2</div>
        <div style={{backgroundColor: '#F5F5F7', border: '1px solid #E2E8F0', borderRadius: '0', padding: '4px 12px', fontSize: '14px', cursor: 'pointer'}}>3</div>
        <div style={{backgroundColor: '#F5F5F7', border: '1px solid #E2E8F0', borderRadius: '0', padding: '4px 12px', fontSize: '14px', cursor: 'pointer'}}>→</div>
      </div>
    </div>
  </div>
</Card>

**Page Sizes:** 10, 25, 50, 100

***

## Row Selection

<Card>
  <div style={{overflowX: 'auto'}}>
    <table style={{width: '100%', borderCollapse: 'collapse', fontSize: '14px'}}>
      <thead>
        <tr style={{backgroundColor: '#F5F5F7', borderBottom: '1px solid #E2E8F0'}}>
          <th style={{padding: '12px 16px', width: '40px'}}>
            <div style={{width: '18px', height: '18px', border: '2px solid #E2E8F0', borderRadius: '0', backgroundColor: 'white'}} />
          </th>

          <th style={{padding: '12px 16px', textAlign: 'left', fontWeight: '600', fontSize: '12px', textTransform: 'uppercase'}}>Name</th>
          <th style={{padding: '12px 16px', textAlign: 'left', fontWeight: '600', fontSize: '12px', textTransform: 'uppercase'}}>Email</th>
        </tr>
      </thead>

      <tbody>
        <tr style={{borderBottom: '1px solid #E2E8F0', backgroundColor: '#F0F7FF'}}>
          <td style={{padding: '12px 16px'}}>
            <div style={{width: '18px', height: '18px', border: '2px solid #2421C4', borderRadius: '0', backgroundColor: '#2421C4', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white', fontSize: '12px'}}>✓</div>
          </td>

          <td style={{padding: '12px 16px', fontWeight: '500'}}>John Smith</td>
          <td style={{padding: '12px 16px'}}>[john@example.com](mailto:john@example.com)</td>
        </tr>

        <tr style={{borderBottom: '1px solid #E2E8F0'}}>
          <td style={{padding: '12px 16px'}}>
            <div style={{width: '18px', height: '18px', border: '2px solid #E2E8F0', borderRadius: '0', backgroundColor: 'white'}} />
          </td>

          <td style={{padding: '12px 16px', fontWeight: '500'}}>Sarah Johnson</td>
          <td style={{padding: '12px 16px'}}>[sarah@example.com](mailto:sarah@example.com)</td>
        </tr>
      </tbody>
    </table>
  </div>
</Card>

**Selection Features:**

* Checkbox in first column
* Select all checkbox in header
* Selected row highlight
* Bulk action toolbar appears when rows selected

***

## Bulk Actions Toolbar

<Card>
  <div style={{padding: '12px 16px', backgroundColor: '#2421C4', color: 'white', display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderRadius: '0'}}>
    <span style={{fontWeight: '500'}}>3 items selected</span>

    <div style={{display: 'flex', gap: '12px'}}>
      <span style={{cursor: 'pointer', padding: '4px 12px', backgroundColor: 'rgba(255,255,255,0.2)', borderRadius: '0'}}>Export</span>
      <span style={{cursor: 'pointer', padding: '4px 12px', backgroundColor: 'rgba(255,255,255,0.2)', borderRadius: '0'}}>Archive</span>
      <span style={{cursor: 'pointer', padding: '4px 12px', backgroundColor: '#DC3545', borderRadius: '0'}}>Delete</span>
    </div>
  </div>
</Card>

***

## Empty State

<Card>
  <div style={{padding: '48px', textAlign: 'center'}}>
    <div style={{fontSize: '48px', marginBottom: '16px'}}>📋</div>
    <h3 style={{fontSize: '18px', fontWeight: '600', marginBottom: '8px'}}>No members found</h3>
    <p style={{color: '#6C757D', marginBottom: '16px'}}>Get started by adding your first member.</p>
    <div style={{backgroundColor: '#2421C4', color: 'white', padding: '10px 20px', borderRadius: '0', display: 'inline-block', cursor: 'pointer'}}>+ Add Member</div>
  </div>
</Card>

***

## Loading State

<Card>
  <div style={{overflowX: 'auto'}}>
    <table style={{width: '100%', borderCollapse: 'collapse', fontSize: '14px'}}>
      <thead>
        <tr style={{backgroundColor: '#F5F5F7', borderBottom: '1px solid #E2E8F0'}}>
          <th style={{padding: '12px 16px', textAlign: 'left'}}>Name</th>
          <th style={{padding: '12px 16px', textAlign: 'left'}}>Email</th>
          <th style={{padding: '12px 16px', textAlign: 'left'}}>Status</th>
        </tr>
      </thead>

      <tbody>
        {[1, 2, 3].map(i => (
                        <tr key={i} style={{borderBottom: '1px solid #E2E8F0'}}>
                          <td style={{padding: '12px 16px'}}>
                            <div style={{height: '16px', backgroundColor: '#E2E8F0', borderRadius: '0', width: '120px', animation: 'pulse 1.5s infinite'}}></div>
                          </td>
                          <td style={{padding: '12px 16px'}}>
                            <div style={{height: '16px', backgroundColor: '#E2E8F0', borderRadius: '0', width: '180px', animation: 'pulse 1.5s infinite'}}></div>
                          </td>
                          <td style={{padding: '12px 16px'}}>
                            <div style={{height: '24px', backgroundColor: '#E2E8F0', borderRadius: '0', width: '64px', animation: 'pulse 1.5s infinite'}}></div>
                          </td>
                        </tr>
                      ))}
      </tbody>
    </table>
  </div>
</Card>

***

## Responsive Tables

### Horizontal Scroll

On small screens, tables use horizontal scrolling:

```css theme={null}
.table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
```

### Card View

For mobile, complex tables can transform into cards:

<Card>
  <div style={{padding: '16px', borderBottom: '1px solid #E2E8F0'}}>
    <div style={{display: 'flex', justifyContent: 'space-between', marginBottom: '8px'}}>
      <span style={{fontWeight: '600'}}>John Smith</span>
      <span style={{backgroundColor: '#ECFDF5', color: '#065F46', padding: '2px 8px', borderRadius: '0', fontSize: '12px'}}>Active</span>
    </div>

    <div style={{fontSize: '14px', color: '#6C757D', marginBottom: '4px'}}>[john@example.com](mailto:john@example.com)</div>
    <div style={{fontSize: '14px', color: '#6C757D'}}>Professional Plan</div>
  </div>

  <div style={{padding: '16px'}}>
    <div style={{display: 'flex', justifyContent: 'space-between', marginBottom: '8px'}}>
      <span style={{fontWeight: '600'}}>Sarah Johnson</span>
      <span style={{backgroundColor: '#FFFBEB', color: '#92400E', padding: '2px 8px', borderRadius: '0', fontSize: '12px'}}>Pending</span>
    </div>

    <div style={{fontSize: '14px', color: '#6C757D', marginBottom: '4px'}}>[sarah@example.com](mailto:sarah@example.com)</div>
    <div style={{fontSize: '14px', color: '#6C757D'}}>Basic Plan</div>
  </div>
</Card>

***

## Column Types

| Type     | Alignment | Example              |
| -------- | --------- | -------------------- |
| Text     | Left      | Names, descriptions  |
| Number   | Right     | Amounts, quantities  |
| Date     | Left      | Created at, due date |
| Status   | Left      | Badges, pills        |
| Actions  | Right     | Edit, delete buttons |
| Avatar   | Left      | User with image      |
| Checkbox | Center    | Row selection        |