docs: complex table filters example (#489)

.eslintrc.cjs

@@ -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,

.storybook/preview.tsx

@@ -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',
@@ -38,7 +45,7 @@ const preview: Preview = {
           ],
           'Candidate Components',
           'UX Patterns',
-          ['Table', ['Table', 'Filters']],
+          ['Table', ['Table', ['Documentation', 'Cell Types', 'Filters', 'Primary', 'Complex']]],
           'Contributing',
           ['Introduction', 'Commits', 'Testing in the platforms', 'Release Process', 'Maintainers'],
         ],

docs/UX Patterns/Table/Filters.mdx

@@ -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
 
@@ -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**
 

docs/UX Patterns/Table/Table.mdx

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