diff --git a/apps/material-react-table-docs/components/prop-tables/columnOptions.ts b/apps/material-react-table-docs/components/prop-tables/columnOptions.ts index 3ce59f0f8..05a65f13c 100644 --- a/apps/material-react-table-docs/components/prop-tables/columnOptions.ts +++ b/apps/material-react-table-docs/components/prop-tables/columnOptions.ts @@ -144,7 +144,7 @@ export const columnOptions: ColumnOption[] = [ linkText: '', source: 'MRT', required: false, - type: 'Array', + type: 'Array', }, { columnOption: 'editVariant', @@ -335,7 +335,7 @@ export const columnOptions: ColumnOption[] = [ linkText: '', source: 'MRT', required: false, - type: 'Array', + type: 'Array', }, { columnOption: 'filterVariant', diff --git a/apps/material-react-table-docs/examples/customize-filter-components/sandbox/src/JS.js b/apps/material-react-table-docs/examples/customize-filter-components/sandbox/src/JS.js index 2a08e1942..24ef58638 100644 --- a/apps/material-react-table-docs/examples/customize-filter-components/sandbox/src/JS.js +++ b/apps/material-react-table-docs/examples/customize-filter-components/sandbox/src/JS.js @@ -25,9 +25,9 @@ const Example = () => { header: 'Gender', filterFn: 'equals', filterSelectOptions: [ - { text: 'Male', value: 'Male' }, - { text: 'Female', value: 'Female' }, - { text: 'Other', value: 'Other' }, + { label: 'Male', value: 'Male' }, + { label: 'Female', value: 'Female' }, + { label: 'Other', value: 'Other' }, ], filterVariant: 'select', }, diff --git a/apps/material-react-table-docs/examples/customize-filter-components/sandbox/src/TS.tsx b/apps/material-react-table-docs/examples/customize-filter-components/sandbox/src/TS.tsx index 495b3e5d5..93a87e5bf 100644 --- a/apps/material-react-table-docs/examples/customize-filter-components/sandbox/src/TS.tsx +++ b/apps/material-react-table-docs/examples/customize-filter-components/sandbox/src/TS.tsx @@ -34,9 +34,9 @@ const Example = () => { header: 'Gender', filterFn: 'equals', filterSelectOptions: [ - { text: 'Male', value: 'Male' }, - { text: 'Female', value: 'Female' }, - { text: 'Other', value: 'Other' }, + { label: 'Male', value: 'Male' }, + { label: 'Female', value: 'Female' }, + { label: 'Other', value: 'Other' }, ], filterVariant: 'select', }, diff --git a/apps/material-react-table-docs/examples/customize-filter-modes/sandbox/src/JS.js b/apps/material-react-table-docs/examples/customize-filter-modes/sandbox/src/JS.js index 4d226afd3..7bd4faf89 100644 --- a/apps/material-react-table-docs/examples/customize-filter-modes/sandbox/src/JS.js +++ b/apps/material-react-table-docs/examples/customize-filter-modes/sandbox/src/JS.js @@ -1,5 +1,8 @@ import { useMemo } from 'react'; -import { MaterialReactTable, useMaterialReactTable } from 'material-react-table'; +import { + MaterialReactTable, + useMaterialReactTable, +} from 'material-react-table'; import { MenuItem } from '@mui/material'; import { data } from './makeData'; diff --git a/apps/material-react-table-docs/examples/enable-filter-facet-values/sandbox/src/JS.js b/apps/material-react-table-docs/examples/enable-filter-facet-values/sandbox/src/JS.js index 29056f6e8..730719c94 100644 --- a/apps/material-react-table-docs/examples/enable-filter-facet-values/sandbox/src/JS.js +++ b/apps/material-react-table-docs/examples/enable-filter-facet-values/sandbox/src/JS.js @@ -1,5 +1,8 @@ import { useMemo } from 'react'; -import { MaterialReactTable, useMaterialReactTable } from 'material-react-table'; +import { + MaterialReactTable, + useMaterialReactTable, +} from 'material-react-table'; import { data } from './makeData'; const Example = () => { diff --git a/apps/material-react-table-docs/examples/enable-row-selection/sandbox/src/JS.js b/apps/material-react-table-docs/examples/enable-row-selection/sandbox/src/JS.js index 21561906d..77a26a2ce 100644 --- a/apps/material-react-table-docs/examples/enable-row-selection/sandbox/src/JS.js +++ b/apps/material-react-table-docs/examples/enable-row-selection/sandbox/src/JS.js @@ -29,33 +29,32 @@ const data = [ const Example = () => { const columns = useMemo( //column definitions... - () => - [ - { - accessorKey: 'firstName', - header: 'First Name', - }, - { - accessorKey: 'lastName', - header: 'Last Name', - }, - { - accessorKey: 'age', - header: 'Age', - }, - { - accessorKey: 'address', - header: 'Address', - }, - { - accessorKey: 'city', - header: 'City', - }, - { - accessorKey: 'state', - header: 'State', - }, - ], + () => [ + { + accessorKey: 'firstName', + header: 'First Name', + }, + { + accessorKey: 'lastName', + header: 'Last Name', + }, + { + accessorKey: 'age', + header: 'Age', + }, + { + accessorKey: 'address', + header: 'Address', + }, + { + accessorKey: 'city', + header: 'City', + }, + { + accessorKey: 'state', + header: 'State', + }, + ], [], //end ); diff --git a/apps/material-react-table-docs/examples/multi-sorting/sandbox/src/TS.tsx b/apps/material-react-table-docs/examples/multi-sorting/sandbox/src/TS.tsx index 9345aa5c3..a545cf67f 100644 --- a/apps/material-react-table-docs/examples/multi-sorting/sandbox/src/TS.tsx +++ b/apps/material-react-table-docs/examples/multi-sorting/sandbox/src/TS.tsx @@ -1,4 +1,8 @@ -import { MaterialReactTable, useMaterialReactTable, type MRT_ColumnDef } from 'material-react-table'; +import { + MaterialReactTable, + useMaterialReactTable, + type MRT_ColumnDef, +} from 'material-react-table'; import { data, type Person } from './makeData'; import { Button } from '@mui/material'; @@ -46,9 +50,9 @@ const Example = () => { Clear All Sorting ), - }) + }); - return + return ; }; export default Example; diff --git a/apps/material-react-table-docs/pages/docs/guides/column-hiding.mdx b/apps/material-react-table-docs/pages/docs/guides/column-hiding.mdx index 22516f663..fdbc36fd9 100644 --- a/apps/material-react-table-docs/pages/docs/guides/column-hiding.mdx +++ b/apps/material-react-table-docs/pages/docs/guides/column-hiding.mdx @@ -5,7 +5,7 @@ import StateOptionsTable from '../../../components/prop-tables/StateOptionsTable import Example from '../../../examples/disable-column-hiding'; - {'Column Hiding Guide - Material React Table V2 Docs} + {'Column Hiding Guide - Material React Table V2 Docs'} { gap: '1rem', }} > - + - + , ); diff --git a/apps/test-remix/app/entry.client.tsx b/apps/test-remix/app/entry.client.tsx index 94d5dc0de..3f01ce18b 100755 --- a/apps/test-remix/app/entry.client.tsx +++ b/apps/test-remix/app/entry.client.tsx @@ -4,15 +4,15 @@ * For more information, see https://remix.run/file-conventions/entry.client */ -import { RemixBrowser } from "@remix-run/react"; -import { startTransition, StrictMode } from "react"; -import { hydrateRoot } from "react-dom/client"; +import { RemixBrowser } from '@remix-run/react'; +import { startTransition, StrictMode } from 'react'; +import { hydrateRoot } from 'react-dom/client'; startTransition(() => { hydrateRoot( document, - + , ); }); diff --git a/apps/test-remix/app/entry.server.tsx b/apps/test-remix/app/entry.server.tsx index 0c7712b0b..99e5e3e65 100755 --- a/apps/test-remix/app/entry.server.tsx +++ b/apps/test-remix/app/entry.server.tsx @@ -4,13 +4,13 @@ * For more information, see https://remix.run/file-conventions/entry.server */ -import { PassThrough } from "node:stream"; +import { PassThrough } from 'node:stream'; -import type { AppLoadContext, EntryContext } from "@remix-run/node"; -import { createReadableStreamFromReadable } from "@remix-run/node"; -import { RemixServer } from "@remix-run/react"; -import isbot from "isbot"; -import { renderToPipeableStream } from "react-dom/server"; +import type { AppLoadContext, EntryContext } from '@remix-run/node'; +import { createReadableStreamFromReadable } from '@remix-run/node'; +import { RemixServer } from '@remix-run/react'; +import isbot from 'isbot'; +import { renderToPipeableStream } from 'react-dom/server'; const ABORT_DELAY = 5_000; @@ -19,20 +19,20 @@ export default function handleRequest( responseStatusCode: number, responseHeaders: Headers, remixContext: EntryContext, - loadContext: AppLoadContext + loadContext: AppLoadContext, ) { - return isbot(request.headers.get("user-agent")) + return isbot(request.headers.get('user-agent')) ? handleBotRequest( request, responseStatusCode, responseHeaders, - remixContext + remixContext, ) : handleBrowserRequest( request, responseStatusCode, responseHeaders, - remixContext + remixContext, ); } @@ -40,7 +40,7 @@ function handleBotRequest( request: Request, responseStatusCode: number, responseHeaders: Headers, - remixContext: EntryContext + remixContext: EntryContext, ) { return new Promise((resolve, reject) => { let shellRendered = false; @@ -56,13 +56,13 @@ function handleBotRequest( const body = new PassThrough(); const stream = createReadableStreamFromReadable(body); - responseHeaders.set("Content-Type", "text/html"); + responseHeaders.set('Content-Type', 'text/html'); resolve( new Response(stream, { headers: responseHeaders, status: responseStatusCode, - }) + }), ); pipe(body); @@ -79,7 +79,7 @@ function handleBotRequest( console.error(error); } }, - } + }, ); setTimeout(abort, ABORT_DELAY); @@ -90,7 +90,7 @@ function handleBrowserRequest( request: Request, responseStatusCode: number, responseHeaders: Headers, - remixContext: EntryContext + remixContext: EntryContext, ) { return new Promise((resolve, reject) => { let shellRendered = false; @@ -106,13 +106,13 @@ function handleBrowserRequest( const body = new PassThrough(); const stream = createReadableStreamFromReadable(body); - responseHeaders.set("Content-Type", "text/html"); + responseHeaders.set('Content-Type', 'text/html'); resolve( new Response(stream, { headers: responseHeaders, status: responseStatusCode, - }) + }), ); pipe(body); @@ -129,7 +129,7 @@ function handleBrowserRequest( console.error(error); } }, - } + }, ); setTimeout(abort, ABORT_DELAY); diff --git a/apps/test-remix/app/root.tsx b/apps/test-remix/app/root.tsx index b46b8fb15..9c680f892 100755 --- a/apps/test-remix/app/root.tsx +++ b/apps/test-remix/app/root.tsx @@ -1,5 +1,5 @@ -import { cssBundleHref } from "@remix-run/css-bundle"; -import type { LinksFunction } from "@remix-run/node"; +import { cssBundleHref } from '@remix-run/css-bundle'; +import type { LinksFunction } from '@remix-run/node'; import { Links, LiveReload, @@ -7,10 +7,10 @@ import { Outlet, Scripts, ScrollRestoration, -} from "@remix-run/react"; +} from '@remix-run/react'; export const links: LinksFunction = () => [ - ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []), + ...(cssBundleHref ? [{ rel: 'stylesheet', href: cssBundleHref }] : []), ]; export default function App() { diff --git a/apps/test-remix/remix.config.js b/apps/test-remix/remix.config.js index 7fac2d305..812df9d05 100755 --- a/apps/test-remix/remix.config.js +++ b/apps/test-remix/remix.config.js @@ -1,6 +1,6 @@ /** @type {import('@remix-run/dev').AppConfig} */ export default { - ignoredRouteFiles: ["**/.*"], + ignoredRouteFiles: ['**/.*'], // appDirectory: "app", // assetsBuildDirectory: "public/build", // publicPath: "/build/", diff --git a/apps/test-vite/src/main.tsx b/apps/test-vite/src/main.tsx index e63eef4a8..e5775c051 100644 --- a/apps/test-vite/src/main.tsx +++ b/apps/test-vite/src/main.tsx @@ -1,9 +1,9 @@ -import React from 'react' -import ReactDOM from 'react-dom/client' -import App from './App.tsx' +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import App from './App.tsx'; ReactDOM.createRoot(document.getElementById('root')!).render( , -) +); diff --git a/apps/test-vite/vite.config.ts b/apps/test-vite/vite.config.ts index 5a33944a9..627a31962 100644 --- a/apps/test-vite/vite.config.ts +++ b/apps/test-vite/vite.config.ts @@ -1,7 +1,7 @@ -import { defineConfig } from 'vite' -import react from '@vitejs/plugin-react' +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], -}) +}); diff --git a/packages/material-react-table/package.json b/packages/material-react-table/package.json index ea796d3cf..941d0ed2f 100644 --- a/packages/material-react-table/package.json +++ b/packages/material-react-table/package.json @@ -1,5 +1,5 @@ { - "version": "2.0.0-beta.14", + "version": "2.0.0-beta.15", "license": "MIT", "name": "material-react-table", "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.", diff --git a/packages/material-react-table/src/column.utils.ts b/packages/material-react-table/src/column.utils.ts index ef0c37fc3..40879cbb2 100644 --- a/packages/material-react-table/src/column.utils.ts +++ b/packages/material-react-table/src/column.utils.ts @@ -348,3 +348,20 @@ export function createMRTColumnHelper< group: (column) => column as MRT_GroupColumnDef, }; } + +export const getValueAndLabel = ( + option: { label?: string; text?: string; value: string } | string, +): { label: string; value: string } => { + let label: string = ''; + let value: string = ''; + if (option) { + if (typeof option !== 'object') { + label = option; + value = option; + } else { + label = option.label ?? option.text ?? option.value; + value = option.value ?? label; + } + } + return { label, value }; +}; diff --git a/packages/material-react-table/src/inputs/MRT_EditCellTextField.tsx b/packages/material-react-table/src/inputs/MRT_EditCellTextField.tsx index 00bedacd2..dd5eb0475 100644 --- a/packages/material-react-table/src/inputs/MRT_EditCellTextField.tsx +++ b/packages/material-react-table/src/inputs/MRT_EditCellTextField.tsx @@ -7,7 +7,7 @@ import { import MenuItem from '@mui/material/MenuItem'; import TextField from '@mui/material/TextField'; import { type TextFieldProps } from '@mui/material/TextField'; -import { parseFromValuesOrFunc } from '../column.utils'; +import { getValueAndLabel, parseFromValuesOrFunc } from '../column.utils'; import { type MRT_Cell, type MRT_RowData, @@ -150,33 +150,23 @@ export const MRT_EditCellTextField = ({ onKeyDown={handleEnterKeyDown} > {textFieldProps.children ?? - columnDef?.editSelectOptions?.map( - (option: { text: string; value: string } | string) => { - let value: string; - let text: string; - if (typeof option !== 'object') { - value = option; - text = option; - } else { - value = option.value; - text = option.text; - } - return ( - - {text} - - ); - }, - )} + columnDef?.editSelectOptions?.map((option) => { + const { label, value } = getValueAndLabel(option); + return ( + + {label} + + ); + })} ); }; diff --git a/packages/material-react-table/src/inputs/MRT_FilterTextField.tsx b/packages/material-react-table/src/inputs/MRT_FilterTextField.tsx index 994f99d61..0fa1e355e 100644 --- a/packages/material-react-table/src/inputs/MRT_FilterTextField.tsx +++ b/packages/material-react-table/src/inputs/MRT_FilterTextField.tsx @@ -21,7 +21,7 @@ import { DatePicker, type DatePickerProps, } from '@mui/x-date-pickers/DatePicker'; -import { parseFromValuesOrFunc } from '../column.utils'; +import { getValueAndLabel, parseFromValuesOrFunc } from '../column.utils'; import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu'; import { type MRT_Header, @@ -309,6 +309,7 @@ export const MRT_FilterTextField = ({ ) : null, inputProps: { + 'aria-label': filterPlaceholder, autoComplete: 'new-password', // disable autocomplete and autofill disabled: !!filterChipLabel, sx: { @@ -373,9 +374,13 @@ export const MRT_FilterTextField = ({ ) : isAutocompleteFilter ? ( option} - onChange={(_e, newValue) => handleChange(newValue)} - options={dropdownOptions ?? []} + getOptionLabel={(option) => getValueAndLabel(option).label} + onChange={(_e, newValue) => + handleChange(getValueAndLabel(newValue).value) + } + options={ + dropdownOptions?.map((option) => getValueAndLabel(option)) ?? [] + } {...autocompleteProps} renderInput={(builtinTextFieldProps) => ( ({ ) : ( {(selected as string[])?.map((value) => { - const selectedValue = dropdownOptions?.find((option) => - option instanceof Object - ? option.value === value - : option === value, + const selectedValue = dropdownOptions?.find( + (option) => getValueAndLabel(option).value === value, ); return ( ); })} @@ -438,44 +437,33 @@ export const MRT_FilterTextField = ({ , ...[ textFieldProps.children ?? - dropdownOptions?.map( - (option: { text: string; value: string } | string, index) => { - if (!option) return ''; - let value: string; - let text: string; - if (typeof option !== 'object') { - value = option; - text = option; - } else { - value = option.value; - text = option.text; - } - return ( - - {isMultiSelectFilter && ( - - )} - {text}{' '} - {!columnDef.filterSelectOptions && - `(${facetedUniqueValues.get(value)})`} - - ); - }, - ), + dropdownOptions?.map((option, index) => { + const { label, value } = getValueAndLabel(option); + return ( + + {isMultiSelectFilter && ( + + )} + {label}{' '} + {!columnDef.filterSelectOptions && + `(${facetedUniqueValues.get(value)})`} + + ); + }), ], ]} diff --git a/packages/material-react-table/src/types.ts b/packages/material-react-table/src/types.ts index b2f3c8cde..79d8a8d5a 100644 --- a/packages/material-react-table/src/types.ts +++ b/packages/material-react-table/src/types.ts @@ -424,7 +424,17 @@ export type MRT_ColumnDef = Omit< LiteralUnion > | null; columns?: MRT_ColumnDef[]; - editSelectOptions?: ({ text: string; value: any } | string)[]; + editSelectOptions?: ( + | { + label?: string; + /** + * @deprecated use `label` instead + */ + text?: string; + value: any; + } + | string + )[]; editVariant?: 'select' | 'text'; enableClickToCopy?: boolean; enableColumnActions?: boolean; @@ -434,7 +444,17 @@ export type MRT_ColumnDef = Omit< enableEditing?: ((row: MRT_Row) => boolean) | boolean; enableFilterMatchHighlighting?: boolean; filterFn?: MRT_FilterFn; - filterSelectOptions?: ({ text: string; value: any } | string)[]; + filterSelectOptions?: ( + | { + label?: string; + /** + * @deprecated use `label` instead + */ + text?: string; + value: any; + } + | string + )[]; filterVariant?: | 'autocomplete' | 'checkbox' diff --git a/packages/material-react-table/stories/features/Editing.stories.tsx b/packages/material-react-table/stories/features/Editing.stories.tsx index 3b2271556..eaf7ba40a 100644 --- a/packages/material-react-table/stories/features/Editing.stories.tsx +++ b/packages/material-react-table/stories/features/Editing.stories.tsx @@ -392,50 +392,50 @@ export const EditSelectVariantAlternate = () => { { accessorKey: 'state', editSelectOptions: [ - { text: 'AL', value: 'Alabama' }, - { text: 'AK', value: 'Alaska' }, - { text: 'AS', value: 'American Samoa' }, - { text: 'AZ', value: 'Arizona' }, - { text: 'AR', value: 'Arkansas' }, - { text: 'CA', value: 'California' }, - { text: 'CO', value: 'Colorado' }, - { text: 'CT', value: 'Connecticut' }, - { text: 'DE', value: 'Delaware' }, - { text: 'FL', value: 'Florida' }, - { text: 'GA', value: 'Georgia' }, - { text: 'GU', value: 'Guam' }, - { text: 'HI', value: 'Hawaii' }, - { text: 'ID', value: 'Idaho' }, - { text: 'IL', value: 'Illinois' }, - { text: 'IN', value: 'Indiana' }, - { text: 'IA', value: 'Iowa' }, - { text: 'KS', value: 'Kansas' }, - { text: 'KY', value: 'Kentucky' }, - { text: 'LA', value: 'Louisiana' }, - { text: 'ME', value: 'Maine' }, - { text: 'MD', value: 'Maryland' }, - { text: 'MA', value: 'Massachusetts' }, - { text: 'MI', value: 'Michigan' }, - { text: 'MN', value: 'Minnesota' }, - { text: 'MS', value: 'Mississippi' }, - { text: 'MO', value: 'Missouri' }, - { text: 'MT', value: 'Montana' }, - { text: 'NE', value: 'Nebraska' }, - { text: 'NV', value: 'Nevada' }, - { text: 'NH', value: 'New Hampshire' }, - { text: 'NJ', value: 'New Jersey' }, - { text: 'NM', value: 'New Mexico' }, - { text: 'NY', value: 'New York' }, - { text: 'NC', value: 'North Carolina' }, - { text: 'ND', value: 'North Dakota' }, - { text: 'MP', value: 'Northern Mariana Islands' }, - { text: 'OH', value: 'Ohio' }, - { text: 'OK', value: 'Oklahoma' }, - { text: 'OR', value: 'Oregon' }, - { text: 'PA', value: 'Pennsylvania' }, - { text: 'PR', value: 'Puerto Rico' }, - { text: 'RI', value: 'Rhode Island' }, - { text: 'SC', value: 'South Carolina' }, + { label: 'AL', value: 'Alabama' }, + { label: 'AK', value: 'Alaska' }, + { label: 'AS', value: 'American Samoa' }, + { label: 'AZ', value: 'Arizona' }, + { label: 'AR', value: 'Arkansas' }, + { label: 'CA', value: 'California' }, + { label: 'CO', value: 'Colorado' }, + { label: 'CT', value: 'Connecticut' }, + { label: 'DE', value: 'Delaware' }, + { label: 'FL', value: 'Florida' }, + { label: 'GA', value: 'Georgia' }, + { label: 'GU', value: 'Guam' }, + { label: 'HI', value: 'Hawaii' }, + { label: 'ID', value: 'Idaho' }, + { label: 'IL', value: 'Illinois' }, + { label: 'IN', value: 'Indiana' }, + { label: 'IA', value: 'Iowa' }, + { label: 'KS', value: 'Kansas' }, + { label: 'KY', value: 'Kentucky' }, + { label: 'LA', value: 'Louisiana' }, + { label: 'ME', value: 'Maine' }, + { label: 'MD', value: 'Maryland' }, + { label: 'MA', value: 'Massachusetts' }, + { label: 'MI', value: 'Michigan' }, + { label: 'MN', value: 'Minnesota' }, + { label: 'MS', value: 'Mississippi' }, + { label: 'MO', value: 'Missouri' }, + { label: 'MT', value: 'Montana' }, + { label: 'NE', value: 'Nebraska' }, + { label: 'NV', value: 'Nevada' }, + { label: 'NH', value: 'New Hampshire' }, + { label: 'NJ', value: 'New Jersey' }, + { label: 'NM', value: 'New Mexico' }, + { label: 'NY', value: 'New York' }, + { label: 'NC', value: 'North Carolina' }, + { label: 'ND', value: 'North Dakota' }, + { label: 'MP', value: 'Northern Mariana Islands' }, + { label: 'OH', value: 'Ohio' }, + { label: 'OK', value: 'Oklahoma' }, + { label: 'OR', value: 'Oregon' }, + { label: 'PA', value: 'Pennsylvania' }, + { label: 'PR', value: 'Puerto Rico' }, + { label: 'RI', value: 'Rhode Island' }, + { label: 'SC', value: 'South Carolina' }, ], editVariant: 'select', header: 'State', diff --git a/packages/material-react-table/stories/features/Filtering.stories.tsx b/packages/material-react-table/stories/features/Filtering.stories.tsx index 9f2dfa909..0b7d45484 100644 --- a/packages/material-react-table/stories/features/Filtering.stories.tsx +++ b/packages/material-react-table/stories/features/Filtering.stories.tsx @@ -167,13 +167,13 @@ export const FilterFnAndFilterVariants = () => ( { accessorKey: 'state', filterSelectOptions: [ - { text: 'AL', value: 'Alabama' }, - { text: 'AZ', value: 'Arizona' }, - { text: 'CA', value: 'California' }, - { text: 'FL', value: 'Florida' }, - { text: 'GA', value: 'Georgia' }, - { text: 'NY', value: 'New York' }, - { text: 'TX', value: 'Texas' }, + { label: 'AL', value: 'Alabama' }, + { label: 'AZ', value: 'Arizona' }, + { label: 'CA', value: 'California' }, + { label: 'FL', value: 'Florida' }, + { label: 'GA', value: 'Georgia' }, + { label: 'NY', value: 'New York' }, + { label: 'TX', value: 'Texas' }, ], filterVariant: 'multi-select', header: 'State', @@ -189,12 +189,16 @@ export const FilterFnAndFilterVariantsFaceted = () => ( columns={[ { accessorKey: 'firstName', - filterFn: 'fuzzy', // default + filterSelectOptions: data.map((row) => ({ + label: row.firstName.toUpperCase(), + value: row.firstName, + })), //hard coded + filterVariant: 'autocomplete', header: 'First Name', }, { accessorKey: 'lastName', - filterVariant: 'autocomplete', + filterVariant: 'autocomplete', //faceted auto generated select options header: 'Last Name', }, {