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.

Sign up for GitHub

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

Docs: Filter & Tables copy updates #442

Merged
merged 4 commits into from
Oct 9, 2024
Merged

Docs: Filter & Tables copy updates #442

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
05aac79
Update Table.mdx
soniakose Oct 7, 2024
06ce7fa
Update Table.mdx
soniakose Oct 7, 2024
5ee4957
Update Filters.mdx
soniakose Oct 7, 2024
8562842
Update Table.mdx
soniakose Oct 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/Design Templates/Table/Filters.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ Examples:
- Coming Soon
- Coming Soon

#### **Complex Filters with Apply Button**
#### **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**
Expand Down
40 changes: 28 additions & 12 deletions docs/Design Templates/Table/Table.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,17 @@

#### 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.

#### Basic Table

##### Header
A typical table header contains column titles that describe the data in each column. It 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 support various formats and are designed to display data in clear, readable ways.
- Numbers (Coming Soon)
- Date / Time (Coming Soon)
- CTA Buttons (Coming Soon)
Expand All @@ -19,10 +21,24 @@ Table cells that support different formats and are designed to display various
- Tags (Coming Soon)
- More Actions (Coming Soon)

[View Example](#link)

#### Tables with Filters
Filters help users refine large datasets within tables. The mParticle table supports a range of filter types, including:

- [Search](#link-to-search)
- [Date Range filters](#link-to-daterange)
- [Basic Filters](#link-to-basic-filters)
- [Filters with an Apply button](#link-to-apply-button-filters)



#### 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) |
| 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) |



#### Example basic table image (To be changed)

Expand Down