import {Layout} from '../../../src/Layout'; export default Layout;

import '../../../tailwind/tailwind.css';

import App from './plants/App'; import {ExampleApp} from '../../../src/ExampleApp'; import {ComponentList} from '../../../src/ComponentCard';

export const hideNav = true; export const isSubpage = true; export const section = 'Examples'; export const keywords = ['react-aria', 'example', 'table', 'search', 'filters', 'taggroup', 'actions', 'form', 'menu', 'popover', 'searchfield', 'dropzone', 'crud']; export const description = 'Table with search, filters, column resizing, and form validation.';

Filterable CRUD Table

<PageDescription>A plant tracking app with CRUD operations, search, filters, table column resizing, form validation, and more.</PageDescription>

<App /> <ExampleApp dir="packages/dev/s2-docs/pages/react-aria/examples/plants" defaultSelected="App.tsx" type="tailwind" />

Components

<ComponentList pages={props.pages} components={[ 'react-aria/Button', 'react-aria/Checkbox', 'react-aria/ComboBox', 'react-aria/DatePicker', 'react-aria/DropZone', 'react-aria/Form', 'react-aria/GridList', 'react-aria/Menu', 'react-aria/Modal', 'react-aria/Popover', 'react-aria/SearchField', 'react-aria/Select', 'react-aria/Table', 'react-aria/TagGroup', 'react-aria/TextField', 'react-aria/ToggleButton', 'react-aria/Tooltip' ]} />