@bsol-oss/react-datatable5 13.0.1-beta.13 → 13.0.1-beta.15

package/dist/index.d.ts

@@ -130,8 +130,6 @@ interface TableControlsProps {
     children?: ReactNode;
     showGlobalFilter?: boolean;
     showFilter?: boolean;
-    showFilterName?: boolean;
-    showFilterTags?: boolean;
     showReload?: boolean;
     showPagination?: boolean;
     showPageSizeControl?: boolean;
@@ -149,7 +147,7 @@ interface TableControlsProps {
     hasError?: boolean;
     gridProps?: GridProps;
 }
-declare const TableControls: ({ fitTableWidth, fitTableHeight, children, showGlobalFilter, showFilter, showFilterName, showFilterTags, showReload, showPagination, showPageSizeControl, showPageCountText, showView, filterTagsOptions, extraItems, loading, hasError, gridProps, }: TableControlsProps) => react_jsx_runtime.JSX.Element;
+declare const TableControls: ({ fitTableWidth, fitTableHeight, children, showGlobalFilter, showFilter, showReload, showPagination, showPageSizeControl, showPageCountText, showView, filterTagsOptions, extraItems, loading, hasError, gridProps, }: TableControlsProps) => react_jsx_runtime.JSX.Element;
 
 declare const TableFilter: () => react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -3198,52 +3198,55 @@ const TableSelector = () => {
                 }, "aria-label": 'reset selection', children: jsxRuntime.jsx(md.MdClear, {}) }))] }));
 };
 
+const Tag = React__namespace.forwardRef(function Tag(props, ref) {
+    const { startElement, endElement, onClose, closable = !!onClose, children, ...rest } = props;
+    return (jsxRuntime.jsxs(react.Tag.Root, { ref: ref, ...rest, children: [startElement && (jsxRuntime.jsx(react.Tag.StartElement, { children: startElement })), jsxRuntime.jsx(react.Tag.Label, { children: children }), endElement && (jsxRuntime.jsx(react.Tag.EndElement, { children: endElement })), closable && (jsxRuntime.jsx(react.Tag.EndElement, { children: jsxRuntime.jsx(react.Tag.CloseTrigger, { onClick: onClose }) }))] }));
+});
+
 const Checkbox = React__namespace.forwardRef(function Checkbox(props, ref) {
     const { icon, children, inputProps, rootRef, ...rest } = props;
     return (jsxRuntime.jsxs(react.Checkbox.Root, { ref: rootRef, ...rest, children: [jsxRuntime.jsx(react.Checkbox.HiddenInput, { ref: ref, ...inputProps }), jsxRuntime.jsx(react.Checkbox.Control, { children: icon || jsxRuntime.jsx(react.Checkbox.Indicator, {}) }), children != null && (jsxRuntime.jsx(react.Checkbox.Label, { children: children }))] }));
 });
 
-// Generate a color based on column id for visual distinction
-const getColorForColumn = (id) => {
-    const colors = [
-        'blue',
-        'green',
-        'purple',
-        'orange',
-        'pink',
-        'cyan',
-        'teal',
-        'red',
-    ];
-    let hash = 0;
-    for (let i = 0; i < id.length; i++) {
-        hash = id.charCodeAt(i) + ((hash << 5) - hash);
-    }
-    return colors[Math.abs(hash) % colors.length];
-};
-const ColumnFilterMenu = ({ columnId, displayName, filterOptions, filterVariant, colorPalette, }) => {
-    const { table, tableLabel } = useDataTableContext();
+const ColumnFilterMenu = ({ displayName, filterOptions, filterVariant, colorPalette, value: controlledValue, onChange, labels, open: controlledOpen, onOpenChange, }) => {
     const [searchTerm, setSearchTerm] = React.useState('');
     const debouncedSearchTerm = usehooks.useDebounce(searchTerm, 300);
-    const [isOpen, setIsOpen] = React.useState(false);
-    const [pendingFilterValue, setPendingFilterValue] = React.useState(undefined);
-    const debouncedFilterValue = usehooks.useDebounce(pendingFilterValue, 300);
-    const lastAppliedValueRef = React.useRef('__INITIAL__');
-    const column = table.getColumn(columnId);
-    const currentFilterValue = column?.getFilterValue();
+    const [internalOpen, setInternalOpen] = React.useState(false);
+    // Use controlled open state if provided, otherwise use internal state
+    const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;
+    const handleOpenChange = (details) => {
+        if (onOpenChange) {
+            onOpenChange(details.open);
+        }
+        else {
+            setInternalOpen(details.open);
+        }
+    };
+    const [internalValue, setInternalValue] = React.useState(undefined);
+    // Use controlled value if provided, otherwise use internal state
+    const currentFilterValue = controlledValue !== undefined ? controlledValue : internalValue;
     const isArrayFilter = filterVariant === 'tag';
-    // Apply debounced filter value to column
+    // Default labels
+    const defaultLabels = {
+        filterByLabel: 'Filter by',
+        filterLabelsPlaceholder: 'Filter labels',
+        noFiltersMatchText: 'No filters match your search',
+    };
+    const finalLabels = { ...defaultLabels, ...labels };
+    // Reset search term when menu closes
     React.useEffect(() => {
-        const currentKey = JSON.stringify(debouncedFilterValue);
-        // Only apply if the value has changed from what we last applied
-        if (currentKey !== lastAppliedValueRef.current) {
-            column?.setFilterValue(debouncedFilterValue);
-            lastAppliedValueRef.current = currentKey;
-        }
-    }, [debouncedFilterValue, column]);
-    // Debounced filter update function
-    const debouncedSetFilterValue = (value) => {
-        setPendingFilterValue(value);
+        if (!isOpen) {
+            setSearchTerm('');
+        }
+    }, [isOpen]);
+    // Filter update function
+    const setFilterValue = (value) => {
+        if (onChange) {
+            onChange(value);
+        }
+        else {
+            setInternalValue(value);
+        }
     };
     // Get active count for this column
     const activeCount = React.useMemo(() => {
@@ -3262,9 +3265,7 @@ const ColumnFilterMenu = ({ columnId, displayName, filterOptions, filterVariant,
         const searchLower = debouncedSearchTerm.toLowerCase();
         return filterOptions.filter((option) => option.label.toLowerCase().includes(searchLower));
     }, [filterOptions, debouncedSearchTerm]);
-    if (!column)
-        return null;
-    return (jsxRuntime.jsxs(MenuRoot, { open: isOpen, onOpenChange: (details) => setIsOpen(details.open), children: [jsxRuntime.jsx(MenuTrigger, { asChild: true, children: jsxRuntime.jsxs(react.Button, { variant: "outline", size: "sm", gap: 2, children: [jsxRuntime.jsx(react.Icon, { as: md.MdFilterList }), jsxRuntime.jsxs(react.Text, { children: [displayName, " ", activeCount > 0 && `(${activeCount})`] })] }) }), jsxRuntime.jsx(MenuContent, { maxW: "20rem", minW: "18rem", children: jsxRuntime.jsxs(react.VStack, { align: "stretch", gap: 2, p: 2, children: [jsxRuntime.jsxs(react.Heading, { size: "sm", px: 2, children: [tableLabel.filterByLabel, " ", displayName] }), jsxRuntime.jsx(InputGroup, { startElement: jsxRuntime.jsx(react.Icon, { as: md.MdSearch }), children: jsxRuntime.jsx(react.Input, { placeholder: tableLabel.filterLabelsPlaceholder, value: searchTerm, onChange: (e) => setSearchTerm(e.target.value) }) }), jsxRuntime.jsx(react.Box, { maxH: "20rem", overflowY: "auto", css: {
+    return (jsxRuntime.jsxs(MenuRoot, { open: isOpen, onOpenChange: handleOpenChange, children: [jsxRuntime.jsx(MenuTrigger, { asChild: true, children: jsxRuntime.jsxs(react.Button, { variant: "outline", size: "sm", gap: 2, children: [jsxRuntime.jsx(react.Icon, { as: md.MdFilterList }), jsxRuntime.jsxs(react.Text, { children: [displayName, " ", activeCount > 0 && `(${activeCount})`] })] }) }), jsxRuntime.jsx(MenuContent, { maxW: "20rem", minW: "18rem", children: jsxRuntime.jsxs(react.VStack, { align: "stretch", gap: 2, p: 2, children: [jsxRuntime.jsxs(react.Heading, { size: "sm", px: 2, children: [finalLabels.filterByLabel, " ", displayName] }), jsxRuntime.jsx(InputGroup, { startElement: jsxRuntime.jsx(react.Icon, { as: md.MdSearch }), children: jsxRuntime.jsx(react.Input, { placeholder: finalLabels.filterLabelsPlaceholder, value: searchTerm, onChange: (e) => setSearchTerm(e.target.value) }) }), jsxRuntime.jsx(react.Box, { maxH: "20rem", overflowY: "auto", css: {
                                 '&::-webkit-scrollbar': {
                                     width: '8px',
                                 },
@@ -3278,7 +3279,7 @@ const ColumnFilterMenu = ({ columnId, displayName, filterOptions, filterVariant,
                                 '&::-webkit-scrollbar-thumb:hover': {
                                     background: 'var(--chakra-colors-border-subtle)',
                                 },
-                            }, children: jsxRuntime.jsx(react.VStack, { align: "stretch", gap: 1, children: filteredOptions.length === 0 ? (jsxRuntime.jsx(react.Text, { px: 2, py: 4, color: "fg.muted", textAlign: "center", children: tableLabel.noFiltersMatchText })) : (filteredOptions.map((option) => {
+                            }, children: jsxRuntime.jsx(react.VStack, { align: "stretch", gap: 1, children: filteredOptions.length === 0 ? (jsxRuntime.jsx(react.Text, { px: 2, py: 4, color: "fg.muted", textAlign: "center", children: finalLabels.noFiltersMatchText })) : (filteredOptions.map((option) => {
                                     const isActive = isArrayFilter
                                         ? currentFilterValue?.includes(option.value) ?? false
                                         : currentFilterValue === option.value;
@@ -3290,29 +3291,26 @@ const ColumnFilterMenu = ({ columnId, displayName, filterOptions, filterVariant,
                                                 // Remove from filter
                                                 const newArray = currentArray.filter((v) => v !== option.value);
                                                 if (newArray.length === 0) {
-                                                    debouncedSetFilterValue(undefined);
+                                                    setFilterValue(undefined);
                                                 }
                                                 else {
-                                                    debouncedSetFilterValue(newArray);
+                                                    setFilterValue(newArray);
                                                 }
                                             }
                                             else {
                                                 // Add to filter
                                                 if (!currentArray.includes(option.value)) {
-                                                    debouncedSetFilterValue([
-                                                        ...currentArray,
-                                                        option.value,
-                                                    ]);
+                                                    setFilterValue([...currentArray, option.value]);
                                                 }
                                             }
                                         }
                                         else {
                                             // Handle single value filters (select variant)
                                             if (isActive) {
-                                                debouncedSetFilterValue(undefined);
+                                                setFilterValue(undefined);
                                             }
                                             else {
-                                                debouncedSetFilterValue(option.value);
+                                                setFilterValue(option.value);
                                             }
                                         }
                                     };
@@ -3327,7 +3325,7 @@ const ColumnFilterMenu = ({ columnId, displayName, filterOptions, filterVariant,
                                                                 if (details.checked) {
                                                                     // Add to filter
                                                                     if (!currentArray.includes(option.value)) {
-                                                                        debouncedSetFilterValue([
+                                                                        setFilterValue([
                                                                             ...currentArray,
                                                                             option.value,
                                                                         ]);
@@ -3337,27 +3335,46 @@ const ColumnFilterMenu = ({ columnId, displayName, filterOptions, filterVariant,
                                                                     // Remove from filter
                                                                     const newArray = currentArray.filter((v) => v !== option.value);
                                                                     if (newArray.length === 0) {
-                                                                        debouncedSetFilterValue(undefined);
+                                                                        setFilterValue(undefined);
                                                                     }
                                                                     else {
-                                                                        debouncedSetFilterValue(newArray);
+                                                                        setFilterValue(newArray);
                                                                     }
                                                                 }
                                                             }
                                                             else {
                                                                 // Handle single value filters (select variant)
                                                                 if (details.checked) {
-                                                                    debouncedSetFilterValue(option.value);
+                                                                    setFilterValue(option.value);
                                                                 }
                                                                 else {
-                                                                    debouncedSetFilterValue(undefined);
+                                                                    setFilterValue(undefined);
                                                                 }
                                                             }
                                                         } }) }), jsxRuntime.jsx(react.Box, { flex: 1, minW: 0, children: jsxRuntime.jsxs(react.HStack, { gap: 2, align: "center", children: [jsxRuntime.jsx(react.Box, { w: 3, h: 3, borderRadius: "full", bg: `${colorPalette}.500`, flexShrink: 0 }), jsxRuntime.jsx(react.Text, { fontSize: "sm", fontWeight: "medium", truncate: true, children: option.label })] }) })] }) }, option.value));
                                 })) }) })] }) })] }));
 };
+
+// Generate a color based on column id for visual distinction
+const getColorForColumn = (id) => {
+    const colors = [
+        'blue',
+        'green',
+        'purple',
+        'orange',
+        'pink',
+        'cyan',
+        'teal',
+        'red',
+    ];
+    let hash = 0;
+    for (let i = 0; i < id.length; i++) {
+        hash = id.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    return colors[Math.abs(hash) % colors.length];
+};
 const TableFilterTags = ({ filterTagsOptions = [], } = {}) => {
-    const { table } = useDataTableContext();
+    const { table, tableLabel } = useDataTableContext();
     // Get columns from filterTagsOptions
     const columnsWithFilters = React.useMemo(() => {
         if (filterTagsOptions.length === 0) {
@@ -3372,26 +3389,91 @@ const TableFilterTags = ({ filterTagsOptions = [], } = {}) => {
             const meta = column.columnDef.meta;
             const displayName = meta?.displayName ?? column.id;
             const filterVariant = meta?.filterVariant;
+            if (!column) {
+                return null;
+            }
             return {
                 columnId: option.column,
                 displayName,
                 filterOptions: option.options,
-                filterVariant: filterVariant === 'tag' ? 'tag' : 'select',
+                filterVariant: (filterVariant === 'tag' ? 'tag' : 'select'),
                 colorPalette: getColorForColumn(option.column),
+                column,
             };
         })
-            .filter((col) => col !== null);
+            .filter((col) => col !== null && col.column !== null && col.column !== undefined);
     }, [table, filterTagsOptions]);
     if (columnsWithFilters.length === 0) {
         return null;
     }
-    return (jsxRuntime.jsx(react.Flex, { gap: 2, flexWrap: "wrap", children: columnsWithFilters.map((column) => (jsxRuntime.jsx(ColumnFilterMenu, { columnId: column.columnId, displayName: column.displayName, filterOptions: column.filterOptions, filterVariant: column.filterVariant, colorPalette: column.colorPalette }, column.columnId))) }));
+    return (jsxRuntime.jsx(react.Flex, { gap: 2, flexWrap: "wrap", children: columnsWithFilters.map((column) => {
+            const filterValue = column.column.getFilterValue();
+            return (jsxRuntime.jsx(ColumnFilterMenu, { displayName: column.displayName, filterOptions: column.filterOptions, filterVariant: column.filterVariant, colorPalette: column.colorPalette, value: filterValue, onChange: (value) => column.column.setFilterValue(value), labels: {
+                    filterByLabel: tableLabel.filterByLabel,
+                    filterLabelsPlaceholder: tableLabel.filterLabelsPlaceholder,
+                    noFiltersMatchText: tableLabel.noFiltersMatchText,
+                } }, column.columnId));
+        }) }));
 };
 
-const TableControls = ({ fitTableWidth = false, fitTableHeight = false, children = jsxRuntime.jsx(jsxRuntime.Fragment, {}), showGlobalFilter = false, showFilter = false, showFilterName = false, showFilterTags = false, showReload = false, showPagination = true, showPageSizeControl = true, showPageCountText = true, showView = true, filterTagsOptions = [], extraItems = jsxRuntime.jsx(jsxRuntime.Fragment, {}), loading = false, hasError = false, gridProps = {}, }) => {
-    const { tableLabel, table } = useDataTableContext();
+const TableControls = ({ fitTableWidth = false, fitTableHeight = false, children = jsxRuntime.jsx(jsxRuntime.Fragment, {}), showGlobalFilter = false, showFilter = false, showReload = false, showPagination = true, showPageSizeControl = true, showPageCountText = true, showView = true, filterTagsOptions = [], extraItems = jsxRuntime.jsx(jsxRuntime.Fragment, {}), loading = false, hasError = false, gridProps = {}, }) => {
+    const { tableLabel, table, columnFilters, setColumnFilters } = useDataTableContext();
     const { hasErrorText } = tableLabel;
-    return (jsxRuntime.jsxs(react.Grid, { templateRows: 'auto 1fr', width: fitTableWidth ? 'fit-content' : '100%', height: fitTableHeight ? 'fit-content' : '100%', gap: '0.5rem', p: 1, ...gridProps, children: [jsxRuntime.jsxs(react.Flex, { flexFlow: 'column', gap: 2, children: [jsxRuntime.jsxs(react.Flex, { justifyContent: 'space-between', children: [jsxRuntime.jsx(react.Box, { children: showView && jsxRuntime.jsx(ViewDialog, { icon: jsxRuntime.jsx(md.MdOutlineViewColumn, {}) }) }), jsxRuntime.jsxs(react.Flex, { gap: '0.5rem', alignItems: 'center', justifySelf: 'end', children: [loading && jsxRuntime.jsx(react.Spinner, { size: 'sm' }), hasError && (jsxRuntime.jsx(Tooltip, { content: hasErrorText, children: jsxRuntime.jsx(react.Icon, { as: bs.BsExclamationCircleFill, color: 'red.400' }) })), showGlobalFilter && jsxRuntime.jsx(GlobalFilter, {}), showFilter && jsxRuntime.jsx(FilterDialog, {}), showReload && jsxRuntime.jsx(ReloadButton, {}), extraItems] })] }), showFilterTags && (jsxRuntime.jsx(react.Flex, { children: jsxRuntime.jsx(TableFilterTags, { filterTagsOptions: filterTagsOptions }) }))] }), jsxRuntime.jsx(react.Grid, { children: children }), (showPageSizeControl || showPageCountText || showPagination) && (jsxRuntime.jsxs(react.Flex, { justifyContent: 'space-between', children: [jsxRuntime.jsxs(react.Flex, { gap: '1rem', alignItems: 'center', children: [showPageSizeControl && jsxRuntime.jsx(PageSizeControl, {}), showPageCountText && jsxRuntime.jsx(RowCountText, {})] }), jsxRuntime.jsx(react.Box, { justifySelf: 'end', children: showPagination && jsxRuntime.jsx(Pagination, {}) })] }))] }));
+    // Get applied filters with display information
+    const appliedFilters = React.useMemo(() => {
+        return columnFilters
+            .map((filter) => {
+            const column = table.getColumn(filter.id);
+            if (!column)
+                return null;
+            const meta = column.columnDef.meta;
+            const displayName = meta?.displayName ?? filter.id;
+            const filterValue = filter.value;
+            // Handle array values (tag filters)
+            if (Array.isArray(filterValue)) {
+                return {
+                    columnId: filter.id,
+                    displayName,
+                    values: filterValue,
+                    isArray: true,
+                };
+            }
+            // Handle single values (select filters)
+            if (filterValue !== undefined &&
+                filterValue !== null &&
+                filterValue !== '') {
+                return {
+                    columnId: filter.id,
+                    displayName,
+                    value: String(filterValue),
+                    isArray: false,
+                };
+            }
+            return null;
+        })
+            .filter((filter) => filter !== null);
+    }, [columnFilters, table]);
+    const handleRemoveFilter = (columnId) => {
+        setColumnFilters(columnFilters.filter((f) => f.id !== columnId));
+    };
+    return (jsxRuntime.jsxs(react.Grid, { templateRows: 'auto 1fr', width: fitTableWidth ? 'fit-content' : '100%', height: fitTableHeight ? 'fit-content' : '100%', gap: '0.5rem', p: 1, ...gridProps, children: [jsxRuntime.jsx(react.Flex, { flexFlow: 'column', gap: 2, children: jsxRuntime.jsxs(react.Flex, { justifyContent: 'space-between', children: [jsxRuntime.jsxs(react.Flex, { gap: 2, alignItems: 'center', flexWrap: 'wrap', children: [showView && jsxRuntime.jsx(ViewDialog, { icon: jsxRuntime.jsx(md.MdOutlineViewColumn, {}) }), appliedFilters.length > 0 && (jsxRuntime.jsx(react.Flex, { gap: 1.5, alignItems: 'center', flexWrap: 'wrap', children: appliedFilters.map((filter) => {
+                                        if (filter.isArray) {
+                                            return filter.values.map((value, index) => (jsxRuntime.jsxs(Tag, { size: "sm", colorPalette: "blue", onClose: () => {
+                                                    const column = table.getColumn(filter.columnId);
+                                                    if (column) {
+                                                        const currentValue = column.getFilterValue() ?? [];
+                                                        const newValue = currentValue.filter((v) => v !== value);
+                                                        if (newValue.length === 0) {
+                                                            handleRemoveFilter(filter.columnId);
+                                                        }
+                                                        else {
+                                                            column.setFilterValue(newValue);
+                                                        }
+                                                    }
+                                                }, children: [filter.displayName, ": ", value] }, `${filter.columnId}-${value}-${index}`)));
+                                        }
+                                        return (jsxRuntime.jsxs(Tag, { size: "sm", colorPalette: "blue", onClose: () => handleRemoveFilter(filter.columnId), children: [filter.displayName, ": ", filter.value] }, filter.columnId));
+                                    }) }))] }), jsxRuntime.jsxs(react.Flex, { gap: '0.5rem', alignItems: 'center', justifySelf: 'end', children: [loading && jsxRuntime.jsx(react.Spinner, { size: 'sm' }), hasError && (jsxRuntime.jsx(Tooltip, { content: hasErrorText, children: jsxRuntime.jsx(react.Icon, { as: bs.BsExclamationCircleFill, color: 'red.400' }) })), showGlobalFilter && jsxRuntime.jsx(GlobalFilter, {}), filterTagsOptions.length > 0 && (jsxRuntime.jsx(TableFilterTags, { filterTagsOptions: filterTagsOptions })), showFilter && jsxRuntime.jsx(FilterDialog, {}), showReload && jsxRuntime.jsx(ReloadButton, {}), extraItems] })] }) }), jsxRuntime.jsx(react.Grid, { children: children }), (showPageSizeControl || showPageCountText || showPagination) && (jsxRuntime.jsxs(react.Flex, { justifyContent: 'space-between', children: [jsxRuntime.jsxs(react.Flex, { gap: '1rem', alignItems: 'center', children: [showPageSizeControl && jsxRuntime.jsx(PageSizeControl, {}), showPageCountText && jsxRuntime.jsx(RowCountText, {})] }), jsxRuntime.jsx(react.Box, { justifySelf: 'end', children: showPagination && jsxRuntime.jsx(Pagination, {}) })] }))] }));
 };
 
 const EmptyState$1 = React__namespace.forwardRef(function EmptyState(props, ref) {
@@ -3959,11 +4041,6 @@ label, containerProps = {}, textProps = {}, children, }) => {
     return (jsxRuntime.jsx(react.Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", wordBreak: "break-all", overflow: "auto", display: "flex", alignItems: "center", justifyContent: alignEnd ? 'flex-end' : undefined, height: "100%", textAlign: alignEnd ? 'right' : undefined, children: jsxRuntime.jsx(RenderValue, { text: displayValue, href: href, onClick: onClick, isCopyable: isCopyable, isBadge: isBadge, badgeColor: badgeColor, colorPalette: colorPalette, globalFilter: globalFilter, alignEnd: alignEnd }) }));
 };
 
-const Tag = React__namespace.forwardRef(function Tag(props, ref) {
-    const { startElement, endElement, onClose, closable = !!onClose, children, ...rest } = props;
-    return (jsxRuntime.jsxs(react.Tag.Root, { ref: ref, ...rest, children: [startElement && (jsxRuntime.jsx(react.Tag.StartElement, { children: startElement })), jsxRuntime.jsx(react.Tag.Label, { children: children }), endElement && (jsxRuntime.jsx(react.Tag.EndElement, { children: endElement })), closable && (jsxRuntime.jsx(react.Tag.EndElement, { children: jsxRuntime.jsx(react.Tag.CloseTrigger, { onClick: onClose }) }))] }));
-});
-
 const CardHeader = ({ row, imageColumnId = undefined, titleColumnId = undefined, tagColumnId = undefined, tagIcon = undefined, showTag = true, imageProps = {}, }) => {
     if (!!row.original === false) {
         return jsxRuntime.jsx(jsxRuntime.Fragment, {});
@@ -6152,15 +6229,29 @@ const defaultRenderDisplay = (item) => {
         for (const field of displayFields) {
             if (obj[field] !== undefined && obj[field] !== null) {
                 const value = obj[field];
-                // Return the value if it's a string or number, otherwise stringify it
+                // Return the value if it's a string or number
                 if (typeof value === 'string' || typeof value === 'number') {
                     return String(value);
                 }
+                // If the value is an object, show warning and recommend custom renderDisplay
+                if (typeof value === 'object' &&
+                    !Array.isArray(value) &&
+                    !(value instanceof Date)) {
+                    console.warn(`[CustomJSONSchema7] Display field "${field}" contains an object value. Consider providing a custom \`renderDisplay\` function in your schema to properly render this item. Field: ${field}, Value: ${JSON.stringify(value).substring(0, 100)}${JSON.stringify(value).length > 100 ? '...' : ''}`);
+                    // Still return the stringified value for now
+                    return JSON.stringify(value);
+                }
             }
         }
         // If no display field found, fall back to JSON.stringify
         return JSON.stringify(item);
     }
+    // For strings that look like JSON, show warning and recommend custom renderDisplay
+    if (typeof item === 'string' &&
+        (item.trim().startsWith('{') || item.trim().startsWith('['))) {
+        console.warn(`[CustomJSONSchema7] Item appears to be a JSON string. Consider providing a custom \`renderDisplay\` function in your schema to properly render this item. Current value: ${item.substring(0, 100)}${item.length > 100 ? '...' : ''}`);
+        return item;
+    }
     // For non-objects (primitives, arrays, dates), use JSON.stringify
     return JSON.stringify(item);
 };

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Button as Button$1, AbsoluteCenter, Spinner, Span, IconButton, Portal, Dialog, Flex, Text, useDisclosure, DialogBackdrop, RadioGroup as RadioGroup$1, Grid, Box, Slider as Slider$1, HStack, For, CheckboxCard as CheckboxCard$1, Input, Menu, createRecipeContext, createContext as createContext$1, Pagination as Pagination$1, usePaginationContext, Tooltip as Tooltip$1, Group, InputElement, Checkbox as Checkbox$1, Icon, VStack, Heading, EmptyState as EmptyState$2, List, Table as Table$1, Card, MenuRoot as MenuRoot$1, MenuTrigger as MenuTrigger$1, Clipboard, Badge, Link, Tag as Tag$1, Image, Alert, Field as Field$1, Popover, useFilter, useListCollection, Combobox, Tabs, useCombobox, Show, Skeleton, NumberInput, RadioCard, CheckboxGroup, Textarea as Textarea$1, InputGroup as InputGroup$1, Select, Center, Stack } from '@chakra-ui/react';
+import { Button as Button$1, AbsoluteCenter, Spinner, Span, IconButton, Portal, Dialog, Flex, Text, useDisclosure, DialogBackdrop, RadioGroup as RadioGroup$1, Grid, Box, Slider as Slider$1, HStack, For, CheckboxCard as CheckboxCard$1, Input, Menu, createRecipeContext, createContext as createContext$1, Pagination as Pagination$1, usePaginationContext, Tooltip as Tooltip$1, Group, InputElement, Tag as Tag$1, Checkbox as Checkbox$1, Icon, VStack, Heading, EmptyState as EmptyState$2, List, Table as Table$1, Card, MenuRoot as MenuRoot$1, MenuTrigger as MenuTrigger$1, Clipboard, Badge, Link, Image, Alert, Field as Field$1, Popover, useFilter, useListCollection, Combobox, Tabs, useCombobox, Show, Skeleton, NumberInput, RadioCard, CheckboxGroup, Textarea as Textarea$1, InputGroup as InputGroup$1, Select, Center, Stack } from '@chakra-ui/react';
 import { AiOutlineColumnWidth } from 'react-icons/ai';
 import * as React from 'react';
 import { createContext, useContext, useState, useMemo, useCallback, useEffect, useRef } from 'react';
@@ -3178,52 +3178,55 @@ const TableSelector = () => {
                 }, "aria-label": 'reset selection', children: jsx(MdClear, {}) }))] }));
 };
 
+const Tag = React.forwardRef(function Tag(props, ref) {
+    const { startElement, endElement, onClose, closable = !!onClose, children, ...rest } = props;
+    return (jsxs(Tag$1.Root, { ref: ref, ...rest, children: [startElement && (jsx(Tag$1.StartElement, { children: startElement })), jsx(Tag$1.Label, { children: children }), endElement && (jsx(Tag$1.EndElement, { children: endElement })), closable && (jsx(Tag$1.EndElement, { children: jsx(Tag$1.CloseTrigger, { onClick: onClose }) }))] }));
+});
+
 const Checkbox = React.forwardRef(function Checkbox(props, ref) {
     const { icon, children, inputProps, rootRef, ...rest } = props;
     return (jsxs(Checkbox$1.Root, { ref: rootRef, ...rest, children: [jsx(Checkbox$1.HiddenInput, { ref: ref, ...inputProps }), jsx(Checkbox$1.Control, { children: icon || jsx(Checkbox$1.Indicator, {}) }), children != null && (jsx(Checkbox$1.Label, { children: children }))] }));
 });
 
-// Generate a color based on column id for visual distinction
-const getColorForColumn = (id) => {
-    const colors = [
-        'blue',
-        'green',
-        'purple',
-        'orange',
-        'pink',
-        'cyan',
-        'teal',
-        'red',
-    ];
-    let hash = 0;
-    for (let i = 0; i < id.length; i++) {
-        hash = id.charCodeAt(i) + ((hash << 5) - hash);
-    }
-    return colors[Math.abs(hash) % colors.length];
-};
-const ColumnFilterMenu = ({ columnId, displayName, filterOptions, filterVariant, colorPalette, }) => {
-    const { table, tableLabel } = useDataTableContext();
+const ColumnFilterMenu = ({ displayName, filterOptions, filterVariant, colorPalette, value: controlledValue, onChange, labels, open: controlledOpen, onOpenChange, }) => {
     const [searchTerm, setSearchTerm] = useState('');
     const debouncedSearchTerm = useDebounce(searchTerm, 300);
-    const [isOpen, setIsOpen] = useState(false);
-    const [pendingFilterValue, setPendingFilterValue] = useState(undefined);
-    const debouncedFilterValue = useDebounce(pendingFilterValue, 300);
-    const lastAppliedValueRef = useRef('__INITIAL__');
-    const column = table.getColumn(columnId);
-    const currentFilterValue = column?.getFilterValue();
+    const [internalOpen, setInternalOpen] = useState(false);
+    // Use controlled open state if provided, otherwise use internal state
+    const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;
+    const handleOpenChange = (details) => {
+        if (onOpenChange) {
+            onOpenChange(details.open);
+        }
+        else {
+            setInternalOpen(details.open);
+        }
+    };
+    const [internalValue, setInternalValue] = useState(undefined);
+    // Use controlled value if provided, otherwise use internal state
+    const currentFilterValue = controlledValue !== undefined ? controlledValue : internalValue;
     const isArrayFilter = filterVariant === 'tag';
-    // Apply debounced filter value to column
+    // Default labels
+    const defaultLabels = {
+        filterByLabel: 'Filter by',
+        filterLabelsPlaceholder: 'Filter labels',
+        noFiltersMatchText: 'No filters match your search',
+    };
+    const finalLabels = { ...defaultLabels, ...labels };
+    // Reset search term when menu closes
     useEffect(() => {
-        const currentKey = JSON.stringify(debouncedFilterValue);
-        // Only apply if the value has changed from what we last applied
-        if (currentKey !== lastAppliedValueRef.current) {
-            column?.setFilterValue(debouncedFilterValue);
-            lastAppliedValueRef.current = currentKey;
-        }
-    }, [debouncedFilterValue, column]);
-    // Debounced filter update function
-    const debouncedSetFilterValue = (value) => {
-        setPendingFilterValue(value);
+        if (!isOpen) {
+            setSearchTerm('');
+        }
+    }, [isOpen]);
+    // Filter update function
+    const setFilterValue = (value) => {
+        if (onChange) {
+            onChange(value);
+        }
+        else {
+            setInternalValue(value);
+        }
     };
     // Get active count for this column
     const activeCount = useMemo(() => {
@@ -3242,9 +3245,7 @@ const ColumnFilterMenu = ({ columnId, displayName, filterOptions, filterVariant,
         const searchLower = debouncedSearchTerm.toLowerCase();
         return filterOptions.filter((option) => option.label.toLowerCase().includes(searchLower));
     }, [filterOptions, debouncedSearchTerm]);
-    if (!column)
-        return null;
-    return (jsxs(MenuRoot, { open: isOpen, onOpenChange: (details) => setIsOpen(details.open), children: [jsx(MenuTrigger, { asChild: true, children: jsxs(Button$1, { variant: "outline", size: "sm", gap: 2, children: [jsx(Icon, { as: MdFilterList }), jsxs(Text, { children: [displayName, " ", activeCount > 0 && `(${activeCount})`] })] }) }), jsx(MenuContent, { maxW: "20rem", minW: "18rem", children: jsxs(VStack, { align: "stretch", gap: 2, p: 2, children: [jsxs(Heading, { size: "sm", px: 2, children: [tableLabel.filterByLabel, " ", displayName] }), jsx(InputGroup, { startElement: jsx(Icon, { as: MdSearch }), children: jsx(Input, { placeholder: tableLabel.filterLabelsPlaceholder, value: searchTerm, onChange: (e) => setSearchTerm(e.target.value) }) }), jsx(Box, { maxH: "20rem", overflowY: "auto", css: {
+    return (jsxs(MenuRoot, { open: isOpen, onOpenChange: handleOpenChange, children: [jsx(MenuTrigger, { asChild: true, children: jsxs(Button$1, { variant: "outline", size: "sm", gap: 2, children: [jsx(Icon, { as: MdFilterList }), jsxs(Text, { children: [displayName, " ", activeCount > 0 && `(${activeCount})`] })] }) }), jsx(MenuContent, { maxW: "20rem", minW: "18rem", children: jsxs(VStack, { align: "stretch", gap: 2, p: 2, children: [jsxs(Heading, { size: "sm", px: 2, children: [finalLabels.filterByLabel, " ", displayName] }), jsx(InputGroup, { startElement: jsx(Icon, { as: MdSearch }), children: jsx(Input, { placeholder: finalLabels.filterLabelsPlaceholder, value: searchTerm, onChange: (e) => setSearchTerm(e.target.value) }) }), jsx(Box, { maxH: "20rem", overflowY: "auto", css: {
                                 '&::-webkit-scrollbar': {
                                     width: '8px',
                                 },
@@ -3258,7 +3259,7 @@ const ColumnFilterMenu = ({ columnId, displayName, filterOptions, filterVariant,
                                 '&::-webkit-scrollbar-thumb:hover': {
                                     background: 'var(--chakra-colors-border-subtle)',
                                 },
-                            }, children: jsx(VStack, { align: "stretch", gap: 1, children: filteredOptions.length === 0 ? (jsx(Text, { px: 2, py: 4, color: "fg.muted", textAlign: "center", children: tableLabel.noFiltersMatchText })) : (filteredOptions.map((option) => {
+                            }, children: jsx(VStack, { align: "stretch", gap: 1, children: filteredOptions.length === 0 ? (jsx(Text, { px: 2, py: 4, color: "fg.muted", textAlign: "center", children: finalLabels.noFiltersMatchText })) : (filteredOptions.map((option) => {
                                     const isActive = isArrayFilter
                                         ? currentFilterValue?.includes(option.value) ?? false
                                         : currentFilterValue === option.value;
@@ -3270,29 +3271,26 @@ const ColumnFilterMenu = ({ columnId, displayName, filterOptions, filterVariant,
                                                 // Remove from filter
                                                 const newArray = currentArray.filter((v) => v !== option.value);
                                                 if (newArray.length === 0) {
-                                                    debouncedSetFilterValue(undefined);
+                                                    setFilterValue(undefined);
                                                 }
                                                 else {
-                                                    debouncedSetFilterValue(newArray);
+                                                    setFilterValue(newArray);
                                                 }
                                             }
                                             else {
                                                 // Add to filter
                                                 if (!currentArray.includes(option.value)) {
-                                                    debouncedSetFilterValue([
-                                                        ...currentArray,
-                                                        option.value,
-                                                    ]);
+                                                    setFilterValue([...currentArray, option.value]);
                                                 }
                                             }
                                         }
                                         else {
                                             // Handle single value filters (select variant)
                                             if (isActive) {
-                                                debouncedSetFilterValue(undefined);
+                                                setFilterValue(undefined);
                                             }
                                             else {
-                                                debouncedSetFilterValue(option.value);
+                                                setFilterValue(option.value);
                                             }
                                         }
                                     };
@@ -3307,7 +3305,7 @@ const ColumnFilterMenu = ({ columnId, displayName, filterOptions, filterVariant,
                                                                 if (details.checked) {
                                                                     // Add to filter
                                                                     if (!currentArray.includes(option.value)) {
-                                                                        debouncedSetFilterValue([
+                                                                        setFilterValue([
                                                                             ...currentArray,
                                                                             option.value,
                                                                         ]);
@@ -3317,27 +3315,46 @@ const ColumnFilterMenu = ({ columnId, displayName, filterOptions, filterVariant,
                                                                     // Remove from filter
                                                                     const newArray = currentArray.filter((v) => v !== option.value);
                                                                     if (newArray.length === 0) {
-                                                                        debouncedSetFilterValue(undefined);
+                                                                        setFilterValue(undefined);
                                                                     }
                                                                     else {
-                                                                        debouncedSetFilterValue(newArray);
+                                                                        setFilterValue(newArray);
                                                                     }
                                                                 }
                                                             }
                                                             else {
                                                                 // Handle single value filters (select variant)
                                                                 if (details.checked) {
-                                                                    debouncedSetFilterValue(option.value);
+                                                                    setFilterValue(option.value);
                                                                 }
                                                                 else {
-                                                                    debouncedSetFilterValue(undefined);
+                                                                    setFilterValue(undefined);
                                                                 }
                                                             }
                                                         } }) }), jsx(Box, { flex: 1, minW: 0, children: jsxs(HStack, { gap: 2, align: "center", children: [jsx(Box, { w: 3, h: 3, borderRadius: "full", bg: `${colorPalette}.500`, flexShrink: 0 }), jsx(Text, { fontSize: "sm", fontWeight: "medium", truncate: true, children: option.label })] }) })] }) }, option.value));
                                 })) }) })] }) })] }));
 };
+
+// Generate a color based on column id for visual distinction
+const getColorForColumn = (id) => {
+    const colors = [
+        'blue',
+        'green',
+        'purple',
+        'orange',
+        'pink',
+        'cyan',
+        'teal',
+        'red',
+    ];
+    let hash = 0;
+    for (let i = 0; i < id.length; i++) {
+        hash = id.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    return colors[Math.abs(hash) % colors.length];
+};
 const TableFilterTags = ({ filterTagsOptions = [], } = {}) => {
-    const { table } = useDataTableContext();
+    const { table, tableLabel } = useDataTableContext();
     // Get columns from filterTagsOptions
     const columnsWithFilters = useMemo(() => {
         if (filterTagsOptions.length === 0) {
@@ -3352,26 +3369,91 @@ const TableFilterTags = ({ filterTagsOptions = [], } = {}) => {
             const meta = column.columnDef.meta;
             const displayName = meta?.displayName ?? column.id;
             const filterVariant = meta?.filterVariant;
+            if (!column) {
+                return null;
+            }
             return {
                 columnId: option.column,
                 displayName,
                 filterOptions: option.options,
-                filterVariant: filterVariant === 'tag' ? 'tag' : 'select',
+                filterVariant: (filterVariant === 'tag' ? 'tag' : 'select'),
                 colorPalette: getColorForColumn(option.column),
+                column,
             };
         })
-            .filter((col) => col !== null);
+            .filter((col) => col !== null && col.column !== null && col.column !== undefined);
     }, [table, filterTagsOptions]);
     if (columnsWithFilters.length === 0) {
         return null;
     }
-    return (jsx(Flex, { gap: 2, flexWrap: "wrap", children: columnsWithFilters.map((column) => (jsx(ColumnFilterMenu, { columnId: column.columnId, displayName: column.displayName, filterOptions: column.filterOptions, filterVariant: column.filterVariant, colorPalette: column.colorPalette }, column.columnId))) }));
+    return (jsx(Flex, { gap: 2, flexWrap: "wrap", children: columnsWithFilters.map((column) => {
+            const filterValue = column.column.getFilterValue();
+            return (jsx(ColumnFilterMenu, { displayName: column.displayName, filterOptions: column.filterOptions, filterVariant: column.filterVariant, colorPalette: column.colorPalette, value: filterValue, onChange: (value) => column.column.setFilterValue(value), labels: {
+                    filterByLabel: tableLabel.filterByLabel,
+                    filterLabelsPlaceholder: tableLabel.filterLabelsPlaceholder,
+                    noFiltersMatchText: tableLabel.noFiltersMatchText,
+                } }, column.columnId));
+        }) }));
 };
 
-const TableControls = ({ fitTableWidth = false, fitTableHeight = false, children = jsx(Fragment, {}), showGlobalFilter = false, showFilter = false, showFilterName = false, showFilterTags = false, showReload = false, showPagination = true, showPageSizeControl = true, showPageCountText = true, showView = true, filterTagsOptions = [], extraItems = jsx(Fragment, {}), loading = false, hasError = false, gridProps = {}, }) => {
-    const { tableLabel, table } = useDataTableContext();
+const TableControls = ({ fitTableWidth = false, fitTableHeight = false, children = jsx(Fragment, {}), showGlobalFilter = false, showFilter = false, showReload = false, showPagination = true, showPageSizeControl = true, showPageCountText = true, showView = true, filterTagsOptions = [], extraItems = jsx(Fragment, {}), loading = false, hasError = false, gridProps = {}, }) => {
+    const { tableLabel, table, columnFilters, setColumnFilters } = useDataTableContext();
     const { hasErrorText } = tableLabel;
-    return (jsxs(Grid, { templateRows: 'auto 1fr', width: fitTableWidth ? 'fit-content' : '100%', height: fitTableHeight ? 'fit-content' : '100%', gap: '0.5rem', p: 1, ...gridProps, children: [jsxs(Flex, { flexFlow: 'column', gap: 2, children: [jsxs(Flex, { justifyContent: 'space-between', children: [jsx(Box, { children: showView && jsx(ViewDialog, { icon: jsx(MdOutlineViewColumn, {}) }) }), jsxs(Flex, { gap: '0.5rem', alignItems: 'center', justifySelf: 'end', children: [loading && jsx(Spinner, { size: 'sm' }), hasError && (jsx(Tooltip, { content: hasErrorText, children: jsx(Icon, { as: BsExclamationCircleFill, color: 'red.400' }) })), showGlobalFilter && jsx(GlobalFilter, {}), showFilter && jsx(FilterDialog, {}), showReload && jsx(ReloadButton, {}), extraItems] })] }), showFilterTags && (jsx(Flex, { children: jsx(TableFilterTags, { filterTagsOptions: filterTagsOptions }) }))] }), jsx(Grid, { children: children }), (showPageSizeControl || showPageCountText || showPagination) && (jsxs(Flex, { justifyContent: 'space-between', children: [jsxs(Flex, { gap: '1rem', alignItems: 'center', children: [showPageSizeControl && jsx(PageSizeControl, {}), showPageCountText && jsx(RowCountText, {})] }), jsx(Box, { justifySelf: 'end', children: showPagination && jsx(Pagination, {}) })] }))] }));
+    // Get applied filters with display information
+    const appliedFilters = useMemo(() => {
+        return columnFilters
+            .map((filter) => {
+            const column = table.getColumn(filter.id);
+            if (!column)
+                return null;
+            const meta = column.columnDef.meta;
+            const displayName = meta?.displayName ?? filter.id;
+            const filterValue = filter.value;
+            // Handle array values (tag filters)
+            if (Array.isArray(filterValue)) {
+                return {
+                    columnId: filter.id,
+                    displayName,
+                    values: filterValue,
+                    isArray: true,
+                };
+            }
+            // Handle single values (select filters)
+            if (filterValue !== undefined &&
+                filterValue !== null &&
+                filterValue !== '') {
+                return {
+                    columnId: filter.id,
+                    displayName,
+                    value: String(filterValue),
+                    isArray: false,
+                };
+            }
+            return null;
+        })
+            .filter((filter) => filter !== null);
+    }, [columnFilters, table]);
+    const handleRemoveFilter = (columnId) => {
+        setColumnFilters(columnFilters.filter((f) => f.id !== columnId));
+    };
+    return (jsxs(Grid, { templateRows: 'auto 1fr', width: fitTableWidth ? 'fit-content' : '100%', height: fitTableHeight ? 'fit-content' : '100%', gap: '0.5rem', p: 1, ...gridProps, children: [jsx(Flex, { flexFlow: 'column', gap: 2, children: jsxs(Flex, { justifyContent: 'space-between', children: [jsxs(Flex, { gap: 2, alignItems: 'center', flexWrap: 'wrap', children: [showView && jsx(ViewDialog, { icon: jsx(MdOutlineViewColumn, {}) }), appliedFilters.length > 0 && (jsx(Flex, { gap: 1.5, alignItems: 'center', flexWrap: 'wrap', children: appliedFilters.map((filter) => {
+                                        if (filter.isArray) {
+                                            return filter.values.map((value, index) => (jsxs(Tag, { size: "sm", colorPalette: "blue", onClose: () => {
+                                                    const column = table.getColumn(filter.columnId);
+                                                    if (column) {
+                                                        const currentValue = column.getFilterValue() ?? [];
+                                                        const newValue = currentValue.filter((v) => v !== value);
+                                                        if (newValue.length === 0) {
+                                                            handleRemoveFilter(filter.columnId);
+                                                        }
+                                                        else {
+                                                            column.setFilterValue(newValue);
+                                                        }
+                                                    }
+                                                }, children: [filter.displayName, ": ", value] }, `${filter.columnId}-${value}-${index}`)));
+                                        }
+                                        return (jsxs(Tag, { size: "sm", colorPalette: "blue", onClose: () => handleRemoveFilter(filter.columnId), children: [filter.displayName, ": ", filter.value] }, filter.columnId));
+                                    }) }))] }), jsxs(Flex, { gap: '0.5rem', alignItems: 'center', justifySelf: 'end', children: [loading && jsx(Spinner, { size: 'sm' }), hasError && (jsx(Tooltip, { content: hasErrorText, children: jsx(Icon, { as: BsExclamationCircleFill, color: 'red.400' }) })), showGlobalFilter && jsx(GlobalFilter, {}), filterTagsOptions.length > 0 && (jsx(TableFilterTags, { filterTagsOptions: filterTagsOptions })), showFilter && jsx(FilterDialog, {}), showReload && jsx(ReloadButton, {}), extraItems] })] }) }), jsx(Grid, { children: children }), (showPageSizeControl || showPageCountText || showPagination) && (jsxs(Flex, { justifyContent: 'space-between', children: [jsxs(Flex, { gap: '1rem', alignItems: 'center', children: [showPageSizeControl && jsx(PageSizeControl, {}), showPageCountText && jsx(RowCountText, {})] }), jsx(Box, { justifySelf: 'end', children: showPagination && jsx(Pagination, {}) })] }))] }));
 };
 
 const EmptyState$1 = React.forwardRef(function EmptyState(props, ref) {
@@ -3939,11 +4021,6 @@ label, containerProps = {}, textProps = {}, children, }) => {
     return (jsx(Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", wordBreak: "break-all", overflow: "auto", display: "flex", alignItems: "center", justifyContent: alignEnd ? 'flex-end' : undefined, height: "100%", textAlign: alignEnd ? 'right' : undefined, children: jsx(RenderValue, { text: displayValue, href: href, onClick: onClick, isCopyable: isCopyable, isBadge: isBadge, badgeColor: badgeColor, colorPalette: colorPalette, globalFilter: globalFilter, alignEnd: alignEnd }) }));
 };
 
-const Tag = React.forwardRef(function Tag(props, ref) {
-    const { startElement, endElement, onClose, closable = !!onClose, children, ...rest } = props;
-    return (jsxs(Tag$1.Root, { ref: ref, ...rest, children: [startElement && (jsx(Tag$1.StartElement, { children: startElement })), jsx(Tag$1.Label, { children: children }), endElement && (jsx(Tag$1.EndElement, { children: endElement })), closable && (jsx(Tag$1.EndElement, { children: jsx(Tag$1.CloseTrigger, { onClick: onClose }) }))] }));
-});
-
 const CardHeader = ({ row, imageColumnId = undefined, titleColumnId = undefined, tagColumnId = undefined, tagIcon = undefined, showTag = true, imageProps = {}, }) => {
     if (!!row.original === false) {
         return jsx(Fragment, {});
@@ -6132,15 +6209,29 @@ const defaultRenderDisplay = (item) => {
         for (const field of displayFields) {
             if (obj[field] !== undefined && obj[field] !== null) {
                 const value = obj[field];
-                // Return the value if it's a string or number, otherwise stringify it
+                // Return the value if it's a string or number
                 if (typeof value === 'string' || typeof value === 'number') {
                     return String(value);
                 }
+                // If the value is an object, show warning and recommend custom renderDisplay
+                if (typeof value === 'object' &&
+                    !Array.isArray(value) &&
+                    !(value instanceof Date)) {
+                    console.warn(`[CustomJSONSchema7] Display field "${field}" contains an object value. Consider providing a custom \`renderDisplay\` function in your schema to properly render this item. Field: ${field}, Value: ${JSON.stringify(value).substring(0, 100)}${JSON.stringify(value).length > 100 ? '...' : ''}`);
+                    // Still return the stringified value for now
+                    return JSON.stringify(value);
+                }
             }
         }
         // If no display field found, fall back to JSON.stringify
         return JSON.stringify(item);
     }
+    // For strings that look like JSON, show warning and recommend custom renderDisplay
+    if (typeof item === 'string' &&
+        (item.trim().startsWith('{') || item.trim().startsWith('['))) {
+        console.warn(`[CustomJSONSchema7] Item appears to be a JSON string. Consider providing a custom \`renderDisplay\` function in your schema to properly render this item. Current value: ${item.substring(0, 100)}${item.length > 100 ? '...' : ''}`);
+        return item;
+    }
     // For non-objects (primitives, arrays, dates), use JSON.stringify
     return JSON.stringify(item);
 };

package/dist/types/components/DataTable/controls/ColumnFilterMenu.d.ts

@@ -0,0 +1,20 @@
+export interface ColumnFilterMenuLabels {
+    filterByLabel?: string;
+    filterLabelsPlaceholder?: string;
+    noFiltersMatchText?: string;
+}
+export interface ColumnFilterMenuProps {
+    displayName: string;
+    filterOptions: {
+        label: string;
+        value: string;
+    }[];
+    filterVariant?: 'select' | 'tag';
+    colorPalette: string;
+    value?: string[] | string | undefined;
+    onChange?: (value: string[] | string | undefined) => void;
+    labels?: ColumnFilterMenuLabels;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+export declare const ColumnFilterMenu: ({ displayName, filterOptions, filterVariant, colorPalette, value: controlledValue, onChange, labels, open: controlledOpen, onOpenChange, }: ColumnFilterMenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DataTable/controls/TableControls.d.ts

@@ -7,8 +7,6 @@ export interface TableControlsProps {
     children?: ReactNode;
     showGlobalFilter?: boolean;
     showFilter?: boolean;
-    showFilterName?: boolean;
-    showFilterTags?: boolean;
     showReload?: boolean;
     showPagination?: boolean;
     showPageSizeControl?: boolean;
@@ -26,4 +24,4 @@ export interface TableControlsProps {
     hasError?: boolean;
     gridProps?: GridProps;
 }
-export declare const TableControls: ({ fitTableWidth, fitTableHeight, children, showGlobalFilter, showFilter, showFilterName, showFilterTags, showReload, showPagination, showPageSizeControl, showPageCountText, showView, filterTagsOptions, extraItems, loading, hasError, gridProps, }: TableControlsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TableControls: ({ fitTableWidth, fitTableHeight, children, showGlobalFilter, showFilter, showReload, showPagination, showPageSizeControl, showPageCountText, showView, filterTagsOptions, extraItems, loading, hasError, gridProps, }: TableControlsProps) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bsol-oss/react-datatable5",
-  "version": "13.0.1-beta.13",
+  "version": "13.0.1-beta.15",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.mjs",