+
+ )}
+
+ );
+};
Playground.argTypes = {
filterRows: {
diff --git a/packages/react/src/components/DataTable/stories/datatable-story.scss b/packages/react/src/components/DataTable/stories/datatable-story.scss
index 77923b6b0edd..f2e0e8cd93b6 100644
--- a/packages/react/src/components/DataTable/stories/datatable-story.scss
+++ b/packages/react/src/components/DataTable/stories/datatable-story.scss
@@ -18,3 +18,7 @@
#storybook-root .slug-column-table .cds--data-table-content {
overflow: initial;
}
+
+.cds--container-checkbox {
+ padding: 1rem;
+}
diff --git a/packages/react/src/components/DataTable/stories/examples/TableToolbarFilter.tsx b/packages/react/src/components/DataTable/stories/examples/TableToolbarFilter.tsx
new file mode 100644
index 000000000000..4d9344922ad2
--- /dev/null
+++ b/packages/react/src/components/DataTable/stories/examples/TableToolbarFilter.tsx
@@ -0,0 +1,180 @@
+import cx from 'classnames';
+import React, { ChangeEvent, useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { Filter } from '@carbon/icons-react';
+
+import { usePrefix } from '../../../../internal/usePrefix';
+import { Popover, PopoverContent } from '../../../Popover';
+import Button from '../../../Button';
+import Checkbox from '../../../Checkbox';
+import { Layer } from '../../../Layer';
+
+export type PopoverAlignment =
+ | 'top'
+ | 'bottom'
+ | 'left'
+ | 'right'
+ | 'top-start'
+ | 'top-end'
+ | 'bottom-start'
+ | 'bottom-end'
+ | 'left-end'
+ | 'left-start'
+ | 'right-end'
+ | 'right-start';
+
+interface TableToolbarFilterProps {
+ /**
+ * Specify how the popover should align with the trigger element
+ */
+ align?: PopoverAlignment;
+
+ /**
+ * Provide an optional class name for the toolbar filter
+ */
+ className?: string;
+
+ /**
+ * Provide an optional hook that is called each time the input is updated
+ */
+ onChange?: (
+ event: '' | ChangeEvent,
+ value?: string
+ ) => void;
+
+ /**
+ * Provide an function that is called when the apply button is clicked
+ */
+ onApplyFilter?: (selectedCheckboxes: Array) => void;
+
+ /**
+ * Provide an function that is called when the reset button is clicked
+ */
+ onResetFilter?: () => void;
+}
+
+const TableToolbarFilter = ({
+ align = 'bottom-end',
+ onApplyFilter,
+ onResetFilter,
+ className,
+ ...rest
+}: TableToolbarFilterProps) => {
+ const [isOpen, setIsOpen] = useState(false);
+ const [selectedCheckboxes, setSelectedCheckboxes] = useState([]);
+
+
+ const prefix = usePrefix();
+
+ const toolbarActionClasses = cx(
+ className,
+ `${prefix}--toolbar-action ${prefix}--overflow-menu`
+ );
+
+ const handleApplyFilter = () => {
+ setIsOpen(false);
+ if (onApplyFilter) {
+ onApplyFilter(selectedCheckboxes);
+ }
+ };
+
+ const handleResetFilter = () => {
+ setIsOpen(false);
+ setSelectedCheckboxes([])
+ if (onResetFilter) {
+ onResetFilter();
+ }
+ };
+
+ const handleCheckboxChange = (e: ChangeEvent) => {
+ const checkboxId = e.target.id;
+ const isChecked = e.target.checked;
+
+ const checkboxValue: HTMLSpanElement | null = document.querySelector(
+ `label[for="${checkboxId}"]`
+ );
+
+ if (isChecked && checkboxValue) {
+ setSelectedCheckboxes([...selectedCheckboxes, checkboxValue.innerText]);
+ } else {
+ setSelectedCheckboxes(selectedCheckboxes.filter(item => item !== checkboxValue?.innerText));
+ }
+ }
+
+ return (
+
+
+ open={isOpen}
+ isTabTip
+ onRequestClose={() => setIsOpen(false)}
+ align={align}
+ {...rest}>
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+TableToolbarFilter.propTypes = {
+ /**
+ * Specify how the popover should align with the trigger element
+ */
+ align: PropTypes.string,
+
+ /**
+ * Provide an optional class name for the search container
+ */
+ className: PropTypes.string,
+
+ /**
+ * Provide an function that is called when the apply button is clicked
+ */
+ onApplyFilter: PropTypes.func,
+
+ /**
+ * Provide an optional hook that is called each time the input is updated
+ */
+ onChange: PropTypes.func,
+
+ /**
+ * Provide an function that is called when the reset button is clicked
+ */
+ onResetFilter: PropTypes.func,
+};
+
+export default TableToolbarFilter;