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	[e-mail]	Admin	Active
Sarah Johnson	[e-mail]	Member	Active
Mike Wilson	[e-mail]	Member	Pending
Emma Davis	[e-mail]	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

Member	Plan	Status	Actions
JS John Smith [e-mail]	Professional	Active	EditDelete
SJ Sarah Johnson [e-mail]	Basic	Pending	EditDelete

---

Table Features

Sorting

Sort Indicators

• 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

Implementation

<th onClick={() => handleSort('name')}>
  Name
  {sortColumn === 'name' && (
    sortDirection === 'asc' ? <ArrowUp /> : <ArrowDown />
  )}
</th>

Filtering

🔍 Search members…

Status: All ▼

Plan: All ▼

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

Showing 1-10 of 156 results

Rows per page:

10 ▼

←

1

2

3

→

Page Sizes: 10, 25, 50, 100

---

Row Selection

	Name	Email
✓	John Smith	[e-mail]
	Sarah Johnson	[e-mail]

Selection Features:

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

---

Bulk Actions Toolbar

3 items selected

ExportArchiveDelete

---

Empty State

📋

No members found

Get started by adding your first member.

+ Add Member

---

Loading State

Name	Email	Status

---

Responsive Tables

Horizontal Scroll

On small screens, tables use horizontal scrolling:

.table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

Card View

For mobile, complex tables can transform into cards:

John SmithActive

[e-mail]

Professional Plan

Sarah JohnsonPending

[e-mail]

Basic Plan

---

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