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

docs: complex table filters example #489

Merged
merged 4 commits into from
Nov 13, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
1 change: 1 addition & 0 deletions .eslintrc.cjs
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,7 @@ module.exports = {
'react/react-in-jsx-scope': 'off',
'import/no-duplicates': 'off',
'react/jsx-boolean-value': 'warn',
'@typescript-eslint/no-confusing-void-expression': ['error', { ignoreArrowShorthand: true }],
},
globals: {
React: true,
Expand Down
9 changes: 8 additions & 1 deletion .storybook/preview.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,16 @@
import type { Preview } from '@storybook/react'
// import type { IndexEntry } from '@storybook/types'

const preview: Preview = {
parameters: {
layout: 'centered',
options: {
// TODO https://mparticle-eng.atlassian.net/browse/UNI-1214
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tried implementing this on this PR but it's more complex than I was expecting, to pulled it out.

// storySort: (a: IndexEntry, b: IndexEntry) => {
// console.log('Ordering stories', { a, b })
// const order = ['Documentation', 'Cell Types', 'Filters', 'Primary', 'Complex']
// return order.indexOf(a[1].name) - order.indexOf(b[1].name)
// },
storySort: {
order: [
'About',
Expand Down Expand Up @@ -38,7 +45,7 @@ const preview: Preview = {
],
'Candidate Components',
'UX Patterns',
['Table', ['Table', 'Filters']],
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This sorting is not working when taking stories into consideration. Need to dig deeper to understand why.

['Table', ['Table', ['Documentation', 'Cell Types', 'Filters', 'Primary', 'Complex']]],
'Contributing',
['Introduction', 'Commits', 'Testing in the platforms', 'Release Process', 'Maintainers'],
],
Expand Down
14 changes: 5 additions & 9 deletions docs/UX Patterns/Table/Filters.mdx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { Meta, Story } from '@storybook/blocks'

import * as FiltersStories from './Filters.stories'
import * as TableStories from './Table.stories'

<Meta of={FiltersStories} />
<Meta of={TableStories} />

# Filters

Expand All @@ -11,24 +11,20 @@ import * as FiltersStories from './Filters.stories'
_Note: This section covers filters specifically for tables. For query-related filters, please refer to the [Analytics Filters - Coming Soon](#coming)._

#### Filter Search

Located above the table on the right, the search filter allows users to quickly find specific data within the table by entering keywords.

#### **Simple Filters**

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

Examples:

<Story of={FiltersStories.WithBasicFilters} />

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

- daterange
- modal: sorting, filters: one of each input type: checkboxes, input, tree select and placeholder for tags
Example:

<Story of={FiltersStories.WithComplexFilters} />
<Story of={TableStories.WithComplexFilters} />

#### **Date Range Filters**

Expand Down
278 changes: 0 additions & 278 deletions docs/UX Patterns/Table/Filters.stories.tsx

This file was deleted.

6 changes: 1 addition & 5 deletions docs/UX Patterns/Table/Table.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ A table row with expand and collapse functionality, allowing users to toggle add

-> Insert Example


### Pagination

Use pagination in tables to improve performance and reduce load times by fetching only the data needed for the current page.
Expand All @@ -40,14 +39,11 @@ Use pagination in tables to improve performance and reduce load times by fetchin

Filters help users narrow down large datasets within tables. Learn more about the variety of filter types available in the mParticle table [here.](https://mparticle.github.io/aquarium/?path=/docs/ux-patterns-table-filters--documentation)


### Table Example

<br />

<Story of={TableStories.BasicTable} />


<Story of={TableStories.Primary} />

### Related Links

Expand Down
Loading
Loading