diff --git a/docs/Design Templates/Table/Filters.mdx b/docs/Design Templates/Table/Filters.mdx index a975af459..7a1bb0632 100644 --- a/docs/Design Templates/Table/Filters.mdx +++ b/docs/Design Templates/Table/Filters.mdx @@ -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** diff --git a/docs/Design Templates/Table/Table.mdx b/docs/Design Templates/Table/Table.mdx index 7a31f4901..b3349ad2d 100644 --- a/docs/Design Templates/Table/Table.mdx +++ b/docs/Design Templates/Table/Table.mdx @@ -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) @@ -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)