Skip to content

Commit

Permalink
docs: table complex filters fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
tibuurcio committed Nov 13, 2024
1 parent 78a4b52 commit 0f29598
Show file tree
Hide file tree
Showing 5 changed files with 324 additions and 403 deletions.
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
// 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', ['Documentation', 'Cell Types', 'Basic Table'], 'Filters']],
['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
Loading

0 comments on commit 0f29598

Please sign in to comment.