@iobroker/json-config 7.4.14 → 7.4.16

package/README.md

@@ -1434,5 +1434,8 @@ The following variables are available in JS function in custom settings:
 
 You can find examples in [`telegram`](https://github.com/iobroker-community-adapters/ioBroker.telegram/tree/master/src-admin) or in [`pushbullet`](https://github.com/Jens1809/ioBroker.pushbullet/tree/master/src-admin) adapter.
 
+## Report a schema error
+Create an issue here: https://github.com/ioBroker/adapter-react-v5/issues
+
 ## For maintainer
 To update location of JsonConfig schema, create pull request to this file: https://github.com/SchemaStore/schemastore/blob/master/src/api/json/catalog.json

package/build/JsonConfigComponent/ConfigTable.d.ts

@@ -1,5 +1,5 @@
 import React, { type JSX } from 'react';
-import type { ConfigItemTable } from '#JC/types';
+import type { ConfigItemTableIndexed, ConfigItemTable } from '#JC/types';
 import ConfigGeneric, { type ConfigGenericProps, type ConfigGenericState } from './ConfigGeneric';
 interface ConfigTableProps extends ConfigGenericProps {
     schema: ConfigItemTable;
@@ -18,11 +18,14 @@ interface ConfigTableState extends ConfigGenericState {
     customObj: Record<string, any>;
     uploadFile: boolean | 'dragging';
     icon: boolean;
+    width: number;
 }
 declare class ConfigTable extends ConfigGeneric<ConfigTableProps, ConfigTableState> {
     private readonly filterRefs;
     private typingTimer;
+    private resizeTimeout;
     private secret;
+    private readonly refDiv;
     constructor(props: ConfigTableProps);
     /**
      * React lifecycle hook, called once as component is mounted
@@ -40,6 +43,9 @@ declare class ConfigTable extends ConfigGeneric<ConfigTableProps, ConfigTableSta
     static setFilterValue(el: React.RefObject<HTMLInputElement>, filterValue: string): string;
     handleRequestSort: (property: string, orderCheck?: boolean) => void;
     stableSort: (order: 'desc' | 'asc', orderBy: string) => Record<string, any>[];
+    renderShowHideFilter(headCell: ConfigItemTableIndexed): React.JSX.Element | null;
+    renderImportExportButtons(schema: ConfigItemTable): React.JSX.Element;
+    renderAddButton(doAnyFilterSet: boolean): React.JSX.Element;
     enhancedTableHead(buttonsWidth: number, doAnyFilterSet: boolean): JSX.Element;
     onDelete: (index: number) => () => void;
     onExport(): void;
@@ -54,6 +60,22 @@ declare class ConfigTable extends ConfigGeneric<ConfigTableProps, ConfigTableSta
     onDrop(acceptedFiles: File[]): void;
     showTypeOfImportDialog(): JSX.Element | null;
     showImportDialog(): JSX.Element | null;
+    renderOneFilter(props: {
+        schema: ConfigItemTable;
+        doAnyFilterSet: boolean;
+        headCell: ConfigItemTableIndexed;
+        index: number;
+        orderBy: string;
+        order: 'asc' | 'desc';
+        showAddButton: boolean;
+        style: React.CSSProperties;
+    }): React.JSX.Element;
+    enhancedFilterCard(): JSX.Element;
+    enhancedBottomCard(): JSX.Element;
+    renderCards(): JSX.Element | null;
+    renderTable(): JSX.Element | null;
+    componentDidUpdate(): void;
+    getCurrentBreakpoint(): 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     renderItem(): JSX.Element | null;
 }
 export default ConfigTable;

package/build/JsonConfigComponent/ConfigTable.js

@@ -1,7 +1,7 @@
 import React, { createRef } from 'react';
 import Dropzone from 'react-dropzone';
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, InputAdornment, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TableSortLabel, TextField, Toolbar, Tooltip, Typography, FormHelperText, } from '@mui/material';
-import { Add as AddIcon, Delete as DeleteIcon, Close as CloseIcon, ArrowUpward as UpIcon, ArrowDownward as DownIcon, FilterAlt as IconFilterOn, FilterAltOff as IconFilterOff, ContentCopy as CopyContentIcon, Download as ExportIcon, Warning as ErrorIcon, UploadFile as ImportIcon, Close as IconClose, } from '@mui/icons-material';
+import { Accordion, AccordionDetails, AccordionSummary, Button, Card, Dialog, DialogActions, DialogContent, DialogTitle, Grid2, IconButton, InputAdornment, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TableSortLabel, TextField, Toolbar, Tooltip, Typography, FormHelperText, } from '@mui/material';
+import { Add as AddIcon, Delete as DeleteIcon, Close as CloseIcon, ArrowUpward as UpIcon, ArrowDownward as DownIcon, FilterAlt as IconFilterOn, FilterAltOff as IconFilterOff, ContentCopy as CopyContentIcon, Download as ExportIcon, Warning as ErrorIcon, UploadFile as ImportIcon, Close as IconClose, ExpandMore as ExpandMoreIcon, } from '@mui/icons-material';
 import { I18n } from '@iobroker/adapter-react-v5';
 import ConfigGeneric from './ConfigGeneric';
 import ConfigPanel from './ConfigPanel';
@@ -194,7 +194,9 @@ function decrypt(secret, value) {
 class ConfigTable extends ConfigGeneric {
     filterRefs;
     typingTimer = null;
+    resizeTimeout = null;
     secret = 'Zgfr56gFe87jJOM';
+    refDiv;
     constructor(props) {
         super(props);
         this.filterRefs = {};
@@ -204,6 +206,7 @@ class ConfigTable extends ConfigGeneric {
                 this.filterRefs[el.attr] = createRef();
             }
         });
+        this.refDiv = React.createRef();
     }
     /**
      * React lifecycle hook, called once as component is mounted
@@ -240,6 +243,7 @@ class ConfigTable extends ConfigGeneric {
             order: 'asc',
             iteration: 0,
             filterOn: [],
+            width: 0,
         }, () => this.validateUniqueProps());
     }
     componentWillUnmount() {
@@ -247,6 +251,10 @@ class ConfigTable extends ConfigGeneric {
             clearTimeout(this.typingTimer);
             this.typingTimer = null;
         }
+        if (this.resizeTimeout) {
+            clearTimeout(this.resizeTimeout);
+            this.resizeTimeout = null;
+        }
         super.componentWillUnmount();
     }
     itemTable(attrItem, data, idx) {
@@ -318,12 +326,12 @@ class ConfigTable extends ConfigGeneric {
     }
     handleRequestSort = (property, orderCheck = false) => {
         const { order, orderBy } = this.state;
-        if (orderBy) {
-            const isAsc = orderBy === property && order === 'asc';
-            const newOrder = orderCheck ? order : isAsc ? 'desc' : 'asc';
-            const newValue = this.stableSort(newOrder, property);
-            this.setState({ order: newOrder, orderBy: property, iteration: this.state.iteration + 10000 }, () => this.applyFilter(false, newValue));
-        }
+        //if (orderBy || 'asc') {
+        const isAsc = orderBy === property && order === 'asc';
+        const newOrder = orderCheck ? order : isAsc ? 'desc' : 'asc';
+        const newValue = this.stableSort(newOrder, property);
+        this.setState({ value: newValue, order: newOrder, orderBy: property, iteration: this.state.iteration + 10000 }, () => this.applyFilter(false, newValue));
+        //}
     };
     stableSort = (order, orderBy) => {
         const { value } = this.state;
@@ -338,67 +346,65 @@ class ConfigTable extends ConfigGeneric {
         });
         return stabilizedThis.map(el => el.el);
     };
+    renderShowHideFilter(headCell) {
+        if (!headCell.filter) {
+            return null;
+        }
+        return (React.createElement(IconButton, { title: I18n.t('ra_Show/hide filter input'), size: "small", onClick: () => {
+                const filterOn = [...this.state.filterOn];
+                const pos = this.state.filterOn.indexOf(headCell.attr);
+                if (pos === -1) {
+                    filterOn.push(headCell.attr);
+                }
+                else {
+                    filterOn.splice(pos, 1);
+                }
+                this.setState({ filterOn }, () => {
+                    if (pos && ConfigTable.getFilterValue(this.filterRefs[headCell.attr])) {
+                        ConfigTable.setFilterValue(this.filterRefs[headCell.attr], '');
+                        this.applyFilter();
+                    }
+                });
+            } }, this.state.filterOn.includes(headCell.attr) ? React.createElement(IconFilterOff, null) : React.createElement(IconFilterOn, null)));
+    }
+    renderImportExportButtons(schema) {
+        return (React.createElement(React.Fragment, null,
+            !schema.noDelete && schema.import ? (React.createElement(Tooltip, { title: I18n.t('ra_Import data from %s file', 'CSV'), slotProps: { popper: { sx: styles.tooltip } } },
+                React.createElement(IconButton, { size: "small", onClick: () => this.setState({ showImportDialog: true }) },
+                    React.createElement(ImportIcon, null)))) : null,
+            schema.export ? (React.createElement(Tooltip, { title: I18n.t('ra_Export data to %s file', 'CSV'), slotProps: { popper: { sx: styles.tooltip } } },
+                React.createElement(IconButton, { size: "small", onClick: () => this.onExport() },
+                    React.createElement(ExportIcon, null)))) : null,
+            React.createElement(IconButton, { disabled: true, size: "small" },
+                React.createElement(DeleteIcon, null))));
+    }
+    renderAddButton(doAnyFilterSet) {
+        return (React.createElement(Tooltip, { title: doAnyFilterSet ? I18n.t('ra_Cannot add items with set filter') : I18n.t('ra_Add row'), slotProps: { popper: { sx: styles.tooltip } } },
+            React.createElement("span", null,
+                React.createElement(IconButton, { size: "small", color: "primary", disabled: !!doAnyFilterSet && !this.props.schema.allowAddByFilter, onClick: this.onAdd },
+                    React.createElement(AddIcon, null)))));
+    }
     enhancedTableHead(buttonsWidth, doAnyFilterSet) {
         const { schema } = this.props;
         const { order, orderBy } = this.state;
         return (React.createElement(TableHead, null,
             React.createElement(TableRow, null,
-                schema.items &&
-                    schema.items.map((headCell, i) => (React.createElement(TableCell, { style: {
-                            width: typeof headCell.width === 'string' && headCell.width.endsWith('%')
-                                ? headCell.width
-                                : headCell.width,
-                        }, key: `${headCell.attr}_${i}`, align: "left", sortDirection: orderBy === headCell.attr ? order : false },
-                        React.createElement("div", { style: {
-                                ...styles.flex,
-                                ...(schema.showFirstAddOnTop ? { flexDirection: 'column' } : undefined),
-                            } },
-                            !i && !schema.noDelete ? (React.createElement(Tooltip, { title: doAnyFilterSet
-                                    ? I18n.t('ra_Cannot add items with set filter')
-                                    : I18n.t('ra_Add row'), slotProps: { popper: { sx: styles.tooltip } } },
-                                React.createElement("span", null,
-                                    React.createElement(IconButton, { size: "small", color: "primary", disabled: !!doAnyFilterSet && !this.props.schema.allowAddByFilter, onClick: this.onAdd },
-                                        React.createElement(AddIcon, null))))) : null,
-                            headCell.sort && (React.createElement(TableSortLabel, { active: true, style: orderBy !== headCell.attr ? styles.silver : undefined, direction: orderBy === headCell.attr ? order : 'asc', onClick: () => this.handleRequestSort(headCell.attr) })),
-                            headCell.filter && this.state.filterOn.includes(headCell.attr) ? (React.createElement(TextField, { variant: "standard", ref: this.filterRefs[headCell.attr], onChange: () => this.applyFilter(), title: I18n.t('ra_You can filter entries by entering here some text'), slotProps: {
-                                    input: {
-                                        endAdornment: ConfigTable.getFilterValue(this.filterRefs[headCell.attr]) && (React.createElement(InputAdornment, { position: "end" },
-                                            React.createElement(IconButton, { size: "small", onClick: () => {
-                                                    ConfigTable.setFilterValue(this.filterRefs[headCell.attr], '');
-                                                    this.applyFilter();
-                                                } },
-                                                React.createElement(CloseIcon, null)))),
-                                    },
-                                }, fullWidth: true, placeholder: this.getText(headCell.title) })) : (React.createElement("span", { style: styles.headerText }, this.getText(headCell.title))),
-                            headCell.filter ? (React.createElement(IconButton, { title: I18n.t('ra_Show/hide filter input'), size: "small", onClick: () => {
-                                    const filterOn = [...this.state.filterOn];
-                                    const pos = this.state.filterOn.indexOf(headCell.attr);
-                                    if (pos === -1) {
-                                        filterOn.push(headCell.attr);
-                                    }
-                                    else {
-                                        filterOn.splice(pos, 1);
-                                    }
-                                    this.setState({ filterOn }, () => {
-                                        if (pos &&
-                                            ConfigTable.getFilterValue(this.filterRefs[headCell.attr])) {
-                                            ConfigTable.setFilterValue(this.filterRefs[headCell.attr], '');
-                                            this.applyFilter();
-                                        }
-                                    });
-                                } }, this.state.filterOn.includes(headCell.attr) ? (React.createElement(IconFilterOff, null)) : (React.createElement(IconFilterOn, null)))) : null)))),
+                schema.items?.map((headCell, i) => this.renderOneFilter({
+                    schema,
+                    style: { width: headCell.width },
+                    showAddButton: !i && !schema.noDelete,
+                    headCell,
+                    order,
+                    orderBy,
+                    index: i,
+                    doAnyFilterSet,
+                })),
                 !schema.noDelete && (React.createElement(TableCell, { style: {
                         paddingLeft: 20,
                         paddingRight: 20,
                         width: buttonsWidth,
                         textAlign: 'right',
-                    }, padding: "checkbox" },
-                    schema.import ? (React.createElement(IconButton, { style: { marginRight: 10 }, size: "small", onClick: () => this.setState({ showImportDialog: true }), title: I18n.t('ra_import data from %s file', 'CSV') },
-                        React.createElement(ImportIcon, null))) : null,
-                    schema.export ? (React.createElement(IconButton, { style: { marginRight: 10 }, size: "small", onClick: () => this.onExport(), title: I18n.t('ra_Export data to %s file', 'CSV') },
-                        React.createElement(ExportIcon, null))) : null,
-                    React.createElement(IconButton, { disabled: true, size: "small" },
-                        React.createElement(DeleteIcon, null)))))));
+                    }, padding: "checkbox" }, this.renderImportExportButtons(schema))))));
     }
     onDelete = (index) => () => {
         const newValue = JSON.parse(JSON.stringify(this.state.value));
@@ -703,14 +709,137 @@ class ConfigTable extends ConfigGeneric {
             React.createElement(DialogActions, null,
                 React.createElement(Button, { variant: "contained", onClick: () => this.setState({ showImportDialog: false }), color: "primary", startIcon: React.createElement(IconClose, null) }, I18n.t('Cancel')))));
     }
-    renderItem( /* error, disabled, defaultValue */) {
+    renderOneFilter(props) {
+        return (React.createElement(TableCell, { key: `${props.headCell.attr}_${props.index}`, style: props.style, align: "left", sortDirection: props.orderBy === props.headCell.attr ? props.order : false },
+            React.createElement("div", { style: {
+                    ...styles.flex,
+                    ...(props.schema.showFirstAddOnTop ? { flexDirection: 'column' } : undefined),
+                } },
+                props.showAddButton ? this.renderAddButton(props.doAnyFilterSet) : null,
+                props.headCell.sort && (React.createElement(TableSortLabel, { active: true, style: props.orderBy !== props.headCell.attr ? styles.silver : undefined, direction: props.orderBy === props.headCell.attr ? props.order : 'asc', onClick: () => this.handleRequestSort(props.headCell.attr) })),
+                props.headCell.filter && this.state.filterOn.includes(props.headCell.attr) ? (React.createElement(TextField, { variant: "standard", ref: this.filterRefs[props.headCell.attr], onChange: () => this.applyFilter(), title: I18n.t('ra_You can filter entries by entering here some text'), slotProps: {
+                        input: {
+                            endAdornment: ConfigTable.getFilterValue(this.filterRefs[props.headCell.attr]) && (React.createElement(InputAdornment, { position: "end" },
+                                React.createElement(IconButton, { size: "small", onClick: () => {
+                                        ConfigTable.setFilterValue(this.filterRefs[props.headCell.attr], '');
+                                        this.applyFilter();
+                                    } },
+                                    React.createElement(CloseIcon, null)))),
+                        },
+                    }, fullWidth: true, placeholder: this.getText(props.headCell.title) })) : (React.createElement("span", { style: styles.headerText }, this.getText(props.headCell.title))),
+                this.renderShowHideFilter(props.headCell))));
+    }
+    enhancedFilterCard() {
+        const { schema } = this.props;
+        const { order, orderBy } = this.state;
+        let tdStyle;
+        if (this.props.schema.compact) {
+            tdStyle = { paddingTop: 1, paddingBottom: 1 };
+        }
+        return (React.createElement(Grid2, { size: {
+                xs: schema.xs || 12,
+                sm: schema.sm || undefined,
+                md: schema.md || undefined,
+                lg: schema.lg || undefined,
+                xl: schema.xl || undefined,
+            } },
+            React.createElement(Card, null,
+                React.createElement(Paper, { style: styles.paper },
+                    React.createElement(Accordion, { style: styles.paper },
+                        React.createElement(AccordionSummary, { expandIcon: React.createElement(ExpandMoreIcon, null) },
+                            React.createElement(Typography, null, I18n.t('ra_Filter and Data Actions'))),
+                        React.createElement(AccordionDetails, null,
+                            React.createElement(Table, null,
+                                React.createElement(TableBody, null,
+                                    schema.items?.map((headCell, i) => (React.createElement(TableRow, { key: `${headCell.attr}_${i}` }, this.renderOneFilter({
+                                        schema,
+                                        style: tdStyle,
+                                        showAddButton: false,
+                                        headCell,
+                                        order,
+                                        orderBy,
+                                        index: i,
+                                        doAnyFilterSet: false,
+                                    })))),
+                                    React.createElement(TableRow, null,
+                                        React.createElement(TableCell, { align: "left", style: tdStyle },
+                                            React.createElement("span", { style: styles.headerText }, I18n.t('ra_Actions'))),
+                                        React.createElement(TableCell, { style: tdStyle }, this.renderImportExportButtons(schema)))))))))));
+    }
+    enhancedBottomCard() {
+        const { schema } = this.props;
+        let tdStyle;
+        if (this.props.schema.compact) {
+            tdStyle = { paddingTop: 1, paddingBottom: 1 };
+        }
+        const doAnyFilterSet = this.isAnyFilterSet();
+        return (React.createElement(Grid2, { size: {
+                xs: schema.xs || 12,
+                sm: schema.sm || undefined,
+                md: schema.md || undefined,
+                lg: schema.lg || undefined,
+                xl: schema.xl || undefined,
+            } },
+            React.createElement(Card, null,
+                React.createElement(Paper, { style: styles.paper },
+                    React.createElement(Table, null,
+                        React.createElement(TableBody, null,
+                            React.createElement(TableRow, null,
+                                React.createElement(TableCell, { colSpan: schema.items.length + 1, style: tdStyle }, this.renderAddButton(doAnyFilterSet)))))))));
+    }
+    renderCards() {
         const { schema } = this.props;
         let { visibleValue } = this.state;
-        if (!this.state.value || !Array.isArray(this.state.value)) {
-            return null;
+        let tdStyle;
+        if (this.props.schema.compact) {
+            tdStyle = { paddingTop: 1, paddingBottom: 1 };
         }
         visibleValue = visibleValue || this.state.value.map((_, i) => i);
         const doAnyFilterSet = this.isAnyFilterSet();
+        return (React.createElement(Grid2, { container: true },
+            this.showImportDialog(),
+            this.showTypeOfImportDialog(),
+            this.enhancedFilterCard(),
+            visibleValue.map((idx, i) => (React.createElement(Grid2, { key: `${idx}_${i}`, size: {
+                    xs: schema.xs || 12,
+                    sm: schema.sm || undefined,
+                    md: schema.md || undefined,
+                    lg: schema.lg || undefined,
+                    xl: schema.xl || undefined,
+                } },
+                React.createElement(Card, null,
+                    React.createElement(Paper, { style: styles.paper },
+                        React.createElement(Table, null,
+                            React.createElement(TableBody, null,
+                                schema.items?.map((headCell) => (React.createElement(TableRow, { key: `${headCell.attr}_${idx}` },
+                                    React.createElement(TableCell, { align: "left", style: tdStyle },
+                                        React.createElement("span", { style: styles.headerText }, this.getText(headCell.title))),
+                                    React.createElement(TableCell, { align: "left", style: tdStyle }, this.itemTable(headCell.attr, this.state.value[idx], idx))))),
+                                React.createElement(TableRow, null,
+                                    React.createElement(TableCell, { align: "left", style: tdStyle },
+                                        React.createElement("span", { style: styles.headerText }, this.getText('Actions'))),
+                                    React.createElement(TableCell, { align: "left", style: tdStyle },
+                                        !doAnyFilterSet && !this.state.orderBy ? (React.createElement(Tooltip, { title: I18n.t('ra_Move up'), slotProps: { popper: { sx: styles.tooltip } } },
+                                            React.createElement("span", null,
+                                                React.createElement(IconButton, { size: "small", onClick: () => this.onMoveUp(idx), disabled: i === 0 },
+                                                    React.createElement(UpIcon, null))))) : null,
+                                        !doAnyFilterSet && !this.state.orderBy ? (React.createElement(Tooltip, { title: I18n.t('ra_Move down'), slotProps: { popper: { sx: styles.tooltip } } },
+                                            React.createElement("span", null,
+                                                React.createElement(IconButton, { size: "small", onClick: () => this.onMoveDown(idx), disabled: i === visibleValue.length - 1 },
+                                                    React.createElement(DownIcon, null))))) : null,
+                                        React.createElement(Tooltip, { title: I18n.t('ra_Delete current row'), slotProps: { popper: { sx: styles.tooltip } } },
+                                            React.createElement(IconButton, { size: "small", onClick: this.onDelete(idx) },
+                                                React.createElement(DeleteIcon, null))),
+                                        this.props.schema.clone ? (React.createElement(Tooltip, { title: I18n.t('ra_Clone current row'), slotProps: { popper: { sx: styles.tooltip } } },
+                                            React.createElement(IconButton, { size: "small", onClick: this.onClone(idx) },
+                                                React.createElement(CopyContentIcon, null)))) : null))))))))),
+            this.enhancedBottomCard()));
+    }
+    renderTable() {
+        const { schema } = this.props;
+        let { visibleValue } = this.state;
+        visibleValue = visibleValue || this.state.value.map((_, i) => i);
+        const doAnyFilterSet = this.isAnyFilterSet();
         let tdStyle;
         if (this.props.schema.compact) {
             tdStyle = { paddingTop: 1, paddingBottom: 1 };
@@ -726,8 +855,7 @@ class ConfigTable extends ConfigGeneric {
                     this.enhancedTableHead(!doAnyFilterSet && !this.state.orderBy ? 120 : 64, doAnyFilterSet),
                     React.createElement(TableBody, null,
                         visibleValue.map((idx, i) => (React.createElement(TableRow, { hover: true, key: `${idx}_${i}` },
-                            schema.items &&
-                                schema.items.map((headCell) => (React.createElement(TableCell, { key: `${headCell.attr}_${idx}`, align: "left", style: tdStyle }, this.itemTable(headCell.attr, this.state.value[idx], idx)))),
+                            schema.items?.map((headCell) => (React.createElement(TableCell, { key: `${headCell.attr}_${idx}`, align: "left", style: tdStyle }, this.itemTable(headCell.attr, this.state.value[idx], idx)))),
                             !schema.noDelete && (React.createElement(TableCell, { align: "left", style: { ...tdStyle, ...styles.buttonCell } },
                                 !doAnyFilterSet && !this.state.orderBy ? (i ? (React.createElement(Tooltip, { title: I18n.t('ra_Move up'), slotProps: { popper: { sx: styles.tooltip } } },
                                     React.createElement(IconButton, { size: "small", onClick: () => this.onMoveUp(idx) },
@@ -742,13 +870,7 @@ class ConfigTable extends ConfigGeneric {
                                     React.createElement(IconButton, { size: "small", onClick: this.onClone(idx) },
                                         React.createElement(CopyContentIcon, null)))) : null))))),
                         !schema.noDelete && visibleValue.length >= (schema.showSecondAddAt || 5) ? (React.createElement(TableRow, null,
-                            React.createElement(TableCell, { colSpan: schema.items.length + 1, style: { ...tdStyle } },
-                                React.createElement(Tooltip, { title: doAnyFilterSet
-                                        ? I18n.t('ra_Cannot add items with set filter')
-                                        : I18n.t('ra_Add row'), slotProps: { popper: { sx: styles.tooltip } } },
-                                    React.createElement("span", null,
-                                        React.createElement(IconButton, { size: "small", color: "primary", disabled: !!doAnyFilterSet && !this.props.schema.allowAddByFilter, onClick: this.onAdd },
-                                            React.createElement(AddIcon, null))))))) : null)),
+                            React.createElement(TableCell, { colSpan: schema.items.length + 1, style: { ...tdStyle } }, this.renderAddButton(doAnyFilterSet)))) : null)),
                 !visibleValue.length && this.state.value.length ? (React.createElement("div", { style: styles.filteredOut },
                     React.createElement(Typography, { style: styles.title, variant: "h6", id: "tableTitle", component: "div" },
                         I18n.t('ra_All items are filtered out'),
@@ -759,6 +881,50 @@ class ConfigTable extends ConfigGeneric {
                 React.createElement(ErrorIcon, { color: "error" }),
                 React.createElement("span", { style: { color: 'red', alignSelf: 'center' } }, this.state.errorMessage))) : null));
     }
+    componentDidUpdate() {
+        if (this.refDiv.current?.clientWidth && this.refDiv.current.clientWidth !== this.state.width) {
+            if (this.resizeTimeout) {
+                clearTimeout(this.resizeTimeout);
+            }
+            this.resizeTimeout = setTimeout(() => {
+                this.resizeTimeout = null;
+                this.setState({ width: this.refDiv.current?.clientWidth });
+            }, 50);
+        }
+    }
+    getCurrentBreakpoint() {
+        if (!this.state.width) {
+            return 'md';
+        }
+        if (this.state.width < 600) {
+            return 'xs';
+        }
+        if (this.state.width < 900) {
+            return 'sm';
+        }
+        if (this.state.width < 1200) {
+            return 'md';
+        }
+        if (this.state.width < 1536) {
+            return 'lg';
+        }
+        return 'xl';
+    }
+    renderItem( /* error, disabled, defaultValue */) {
+        const { schema } = this.props;
+        if (!this.state.value || !Array.isArray(this.state.value)) {
+            return null;
+        }
+        const currentBreakpoint = this.getCurrentBreakpoint();
+        let content;
+        if (currentBreakpoint && (schema.useCardFor || ['xs']).includes(currentBreakpoint)) {
+            content = this.renderCards();
+        }
+        else {
+            content = this.renderTable();
+        }
+        return (React.createElement("div", { ref: this.refDiv, style: { width: '100%' } }, content));
+    }
 }
 export default ConfigTable;
 //# sourceMappingURL=ConfigTable.js.map