Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Table & Filters Doc updates #439

Merged
merged 16 commits into from
Oct 7, 2024
1 change: 1 addition & 0 deletions docs/Design Templates/Cell-link.dmx
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@

20 changes: 20 additions & 0 deletions docs/Design Templates/Filters.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
### Filters

*Note: This section covers filters specifically for tables. For query-related filters, please refer to the [Analytics Filters - Coming Soon](#coming).*

#### **Simple Filters**
Simple filters are ideal when there are only a few filter options. These are straightforward and quick to use, often appearing as dropdowns above the table. For implementation, refer to the [Select Component](https://mparticle.github.io/aquarium/?path=/docs/components-data-entry-select--documentation).

Examples:
- Coming Soon
- Coming Soon

#### **Complex Filters with Apply Button**
Complex filters provide more advanced filtering options, allowing users to apply multiple criteria at once. These filters often include dropdowns, checkboxes, and text fields. Complex filters are particularly useful when multiple filters need to be applied simultaneously or when load times might be a concern.

#### **Date Range Filters**
Date range filters allow users to specify a range of dates to narrow down the data displayed in the table. Typically, these filters include a start date and an end date, with options for common ranges like “Last 7 days” or “Last 30 days.” User presets are also available for frequently used date ranges.

Examples:
- [Basic Date Picker](https://mparticle.github.io/aquarium/?path=/docs/components-data-entry-date-picker--documentation)
- [Date Range Filter with Presets](https://mparticle.github.io/aquarium/?path=/docs/candidate-components-directory-date-range-filter--documentation)
24 changes: 24 additions & 0 deletions docs/Design Templates/Table.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
### Table
#### Overview
Tables present and organize data in a structured, readable format, ranging from basic displays to complex interfaces that support queries and data manipulation.
#### Filter Bar
Filters allow users to narrow down large datasets in tables. While not required for all tables, the filter bar typically appears above the table.
#### Header
A typical table header contains column titles that describe the data in each column. It often includes functionality for sorting columns and may feature help icons with tooltips to provide additional information on each column’s purpose.
#### Pagination
Use pagination in tables to improve performance and reduce load times by fetching only the data needed for the current page.

#### Cell Types
Table cells that support different formats and are designed to display various types of data in appropriate and easily readable ways.
- Numbers (Coming Soon)
- Date / Time (Coming Soon)
- CTA Buttons (Coming Soon)
- Status Badges (Coming Soon)
- Links (Coming Soon)
- Tags (Coming Soon)
- More Actions (Coming Soon)

#### Related Links
| Type | Resource |
| -------- | ------- |
| Eames | [Figma Templates](https://www.figma.com/design/yCPszaTtkCFxRHaSkkJFR9/Eames-Templates-%5BInternal%5D?node-id=2114-9632&node-type=frame&t=Aa9XxcKyme3ud4cb-0) |
1 change: 1 addition & 0 deletions docs/Design Templates/cell-badge
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@

18 changes: 18 additions & 0 deletions docs/Design Templates/cell-more-actions.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
### More Actions Menu

#### Overview
The Actions Menu provides a consolidated interface for row-specific operations, such as delete, duplicate, download, and archive, all grouped within a single menu.

<iframe width="1143" height="8208" src="https://www.figma.com/embed?embed_host=your-site.com&url=https://www.figma.com/design/yCPszaTtkCFxRHaSkkJFR9/Eames-Templates-%5BInternal%5D?node-id=2146-40220" allowfullscreen></iframe>




#### Usage Guidelines
- Highlight destructive actions in red to ensure emphasis and user caution.
- Omit icons from menu items to maintain a clean, easy-to-read menu.
- Display the "More Actions" menu even when only one option is available.

Examples:
- Disabled menu item (Coming Soon)

1 change: 1 addition & 0 deletions docs/Design Templates/cell-tag
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@

17 changes: 17 additions & 0 deletions docs/Design Templates/tags.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
### Tags in Tables

#### Overview
Tags are used within tables to visually categorize or label data, providing users with quick context about specific rows or items. Tags can indicate statuses, categories, priorities, or any other metadata that helps users understand and interpret the data at a glance.

#### Managing Tags
- **Creating Tags - COMING SOON**
- **Editing Tags - COMING SOON**
- **Deleting Tags - COMING SOON**

#### Displaying Tags within Tables

COMING SOON

#### Filtering by Tags

COMING SOON
Loading