qwc2 2026.8.13 → 2026.8.21

package/components/AttributeTableWidget.js

@@ -48,53 +48,47 @@ import NavBar from '../components/widgets/NavBar';
 import NumberInput from '../components/widgets/NumberInput';
 import ReCaptchaWidget from '../components/widgets/ReCaptchaWidget';
 import Spinner from '../components/widgets/Spinner';
-import TextInput, { TextInputInitContext } from '../components/widgets/TextInput';
+import TextInput from '../components/widgets/TextInput';
 import ConfigUtils from '../utils/ConfigUtils';
 import CoordinatesUtils from '../utils/CoordinatesUtils';
 import { FeatureCache, KeyValCache, parseExpression, getFeatureTemplate } from '../utils/EditingUtils';
 import LayerUtils from '../utils/LayerUtils';
 import LocaleUtils from '../utils/LocaleUtils';
 import MapUtils from '../utils/MapUtils';
-import MiscUtils, { ToggleSet } from '../utils/MiscUtils';
 import VectorLayerUtils from '../utils/VectorLayerUtils';
+import FeaturesTable from './widgets/FeaturesTable';
 import './style/AttributeTableWidget.css';
 var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
   function AttributeTableWidget(props) {
     var _this;
     _classCallCheck(this, AttributeTableWidget);
     _this = _callSuper(this, AttributeTableWidget, [props]);
-    _defineProperty(_this, "renderSortIndicator", function (field) {
-      if (_this.state.sortField && _this.state.sortField.field === field) {
-        return /*#__PURE__*/React.createElement(Icon, {
-          icon: _this.state.sortField.dir > 0 ? "chevron-down" : "chevron-up"
-        });
-      } else {
-        return null;
-      }
+    _defineProperty(_this, "rowIsDisabled", function (idx) {
+      return _this.state.changedFeatureIdx !== null && _this.state.changedFeatureIdx !== idx;
     });
-    _defineProperty(_this, "renderColumnResizeHandle", function (col, pos) {
-      return /*#__PURE__*/React.createElement("span", {
-        className: "attribtable-table-" + pos + "draghandle",
-        onPointerDown: function onPointerDown(ev) {
-          return _this.resizeTable(ev, col, true);
-        }
+    _defineProperty(_this, "setSelectedFeatures", function (features) {
+      _this.setState({
+        selectedFeatures: features
       });
     });
-    _defineProperty(_this, "renderRowResizeHandle", function (row, pos) {
-      return /*#__PURE__*/React.createElement("span", {
-        className: "attribtable-table-" + pos + "draghandle",
-        onPointerDown: function onPointerDown(ev) {
-          return _this.resizeTable(ev, row, false);
-        }
+    _defineProperty(_this, "setHoveredFeature", function (feature) {
+      _this.setState({
+        hoveredFeature: feature
       });
     });
-    _defineProperty(_this, "renderField", function (feature, editConfig, mapPrefix, field, updateField, fielddisabled) {
+    _defineProperty(_this, "renderField", function (feature, field, featureidx, rowdisabled) {
+      var editConfig = _this.state.curEditConfig;
+      var mapPrefix = editConfig.editDataset.split(".")[0];
+      var updateField = function updateField(fieldid, val) {
+        var emptynull = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+        return _this.updateField(featureidx, fieldid, val, emptynull);
+      };
       var value = feature.properties[field.id];
       if (value === undefined || value === null) {
         value = "";
       }
       var constraints = field.constraints || {};
-      var disabled = constraints.readOnly || fielddisabled;
+      var disabled = constraints.readOnly || rowdisabled;
       var input = null;
       if (field.type === "boolean" || field.type === "bool") {
         input = /*#__PURE__*/React.createElement("input", _extends({
@@ -229,6 +223,16 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
           layerName = _selectedLayer$split2[1];
         var newState = _objectSpread(_objectSpread({}, state), stateChange);
         var editConfig = _this.props.editConfigs[wmsName][layerName];
+        var fields = (_this.props.showDisplayFieldOnly ? editConfig.fields.filter(function (field) {
+          return field.name === editConfig.displayField;
+        }) : editConfig.fields.filter(function (field) {
+          var _field$constraints;
+          return _this.props.showHiddenFields || ((_field$constraints = field.constraints) === null || _field$constraints === void 0 ? void 0 : _field$constraints.hidden) !== true;
+        })).map(function (field) {
+          return _objectSpread(_objectSpread({}, field), {}, {
+            name: _this.translateFieldName(field.name)
+          });
+        });
         if (selectedLayer !== state.loadedLayer) {
           var _this$props$layers$fi, _this$props$layers$fi2;
           KeyValCache.clear();
@@ -236,12 +240,13 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
           Object.assign(newState, AttributeTableWidget.defaultState);
           newState.limitToExtent = state.limitToExtent;
           newState.curEditConfig = editConfig;
+          newState.curFields = fields;
           newState.fieldTranslations = (_this$props$layers$fi = (_this$props$layers$fi2 = _this.props.layers.find(function (layer) {
             return layer.wms_name === wmsName;
           })) === null || _this$props$layers$fi2 === void 0 || (_this$props$layers$fi2 = _this$props$layers$fi2.translations) === null || _this$props$layers$fi2 === void 0 || (_this$props$layers$fi2 = _this$props$layers$fi2.layers) === null || _this$props$layers$fi2 === void 0 || (_this$props$layers$fi2 = _this$props$layers$fi2[layerName]) === null || _this$props$layers$fi2 === void 0 ? void 0 : _this$props$layers$fi2.fields) !== null && _this$props$layers$fi !== void 0 ? _this$props$layers$fi : {};
         }
         newState.selectedLayer = selectedLayer;
-        newState.selectedFeatures = new ToggleSet();
+        newState.selectedFeatures = {};
         newState.tableReady = false;
         _this.pendingTextEdits = new Set();
         var options = {
@@ -254,14 +259,14 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
         var fieldMap = (((_newState$curEditConf = newState.curEditConfig) === null || _newState$curEditConf === void 0 ? void 0 : _newState$curEditConf.fields) || []).reduce(function (res, field) {
           return _objectSpread(_objectSpread({}, res), {}, _defineProperty({}, field.id, field));
         }, {});
-        var clientSideFilterSort = newState.clientSideData || newState.filterVal && ((_fieldMap$newState$fi = fieldMap[newState.filterField]) === null || _fieldMap$newState$fi === void 0 ? void 0 : _fieldMap$newState$fi.expression) || ((_fieldMap$newState$so = fieldMap[(_newState$sortField = newState.sortField) === null || _newState$sortField === void 0 ? void 0 : _newState$sortField.field]) === null || _fieldMap$newState$so === void 0 ? void 0 : _fieldMap$newState$so.expression);
+        var clientSideFilterSort = newState.filterVal && ((_fieldMap$newState$fi = fieldMap[newState.filterField]) === null || _fieldMap$newState$fi === void 0 ? void 0 : _fieldMap$newState$fi.expression) || ((_fieldMap$newState$so = fieldMap[(_newState$sortField = newState.sortField) === null || _newState$sortField === void 0 ? void 0 : _newState$sortField.field]) === null || _fieldMap$newState$so === void 0 ? void 0 : _fieldMap$newState$so.expression);
         if (!forceReload && clientSideFilterSort && newState.allFeatures) {
           return _objectSpread(_objectSpread({}, newState), {}, {
             features: _this.filteredSortedFeatures(newState.allFeatures, newState)
           });
         } else {
           Object.assign(newState, {
-            allFeatures: [],
+            allFeatures: null,
             features: []
           });
           if (clientSideFilterSort) {
@@ -278,7 +283,7 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
             } else if (newState.filterVal) {
               options.filter = [[newState.filterField, newState.filterOp, newState.filterVal]];
             } else {
-              // NOTE: Query full feature set when filtering so that filtered geometries can be highlighted
+              // NOTE: set offset/limit only when not filtering. Query all filtered features so that they can be highlighted.
               options.offset = newState.currentPage * newState.pageSize;
               options.limit = newState.pageSize;
             }
@@ -287,18 +292,13 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
           newState.loading = true;
           _this.props.iface.getFeatures(editConfig, _this.props.mapCrs, function (result) {
             if (result) {
-              var _result$numberMatched, _options$offset;
-              var featuresSlice = result.features || [];
-              var features = new Array((_result$numberMatched = result.numberMatched) !== null && _result$numberMatched !== void 0 ? _result$numberMatched : featuresSlice.length);
-              features.splice.apply(features, [(_options$offset = options.offset) !== null && _options$offset !== void 0 ? _options$offset : 0, featuresSlice.length].concat(_toConsumableArray(featuresSlice)));
-              var sortedFilteredFeatures = clientSideFilterSort ? _this.filteredSortedFeatures(features, newState) : features;
+              var _result$numberMatched;
               _this.setState({
                 loading: false,
-                allFeatures: options.limit === undefined || result.numberMatched === undefined ? features : null,
-                features: sortedFilteredFeatures,
-                featureCount: Math.ceil(sortedFilteredFeatures.length / newState.pageSize),
-                loadedLayer: newState.selectedLayer,
-                clientSideData: result.numberMatched === undefined
+                allFeatures: clientSideFilterSort ? result.features : null,
+                features: clientSideFilterSort ? _this.filteredSortedFeatures(result.features, newState) : result.features,
+                totFeatureCount: (_result$numberMatched = result.numberMatched) !== null && _result$numberMatched !== void 0 ? _result$numberMatched : result.features.length,
+                loadedLayer: newState.selectedLayer
               });
             } else {
               // eslint-disable-next-line
@@ -361,7 +361,9 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
         }, []);
       }
       if (state.sortField) {
-        var sortFieldValue = state.sortField.field === "id" ? function (feature) {
+        var _this$state$curEditCo;
+        var pk = (_this$state$curEditCo = _this.state.curEditConfig.primaryKey) !== null && _this$state$curEditCo !== void 0 ? _this$state$curEditCo : "id";
+        var sortFieldValue = state.sortField.field === pk ? function (feature) {
           return feature.id;
         } : function (feature) {
           return feature.properties[state.sortField.field];
@@ -378,10 +380,6 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
         return filteredFeatures;
       }
     });
-    _defineProperty(_this, "currentPageFeatures", function (state) {
-      var indexOffset = state.currentPage * state.pageSize;
-      return state.features.slice(indexOffset, indexOffset + state.pageSize);
-    });
     _defineProperty(_this, "updateFilter", function (stateField, val) {
       var newState = {
         filterField: _this.state.filterField,
@@ -433,28 +431,31 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
       };
       var mapPrefix = _this.state.curEditConfig.editDataset.split(".")[0];
       getFeatureTemplate(_this.state.curEditConfig, featureSkel, _this.props.iface, mapPrefix, _this.props.mapCrs, function (feature) {
-        _this.setState({
-          newFeature: feature,
-          filterVal: ""
+        _this.setState(function (state) {
+          return {
+            features: [].concat(_toConsumableArray(state.features), [feature]),
+            changedFeatureIdx: state.features.length,
+            filterVal: ""
+          };
+        }, function () {
+          if (_this.attribTableContents) {
+            _this.attribTableContents.firstElementChild.scrollTop = _this.attribTableContents.firstElementChild.scrollHeight;
+          }
         });
         _this.props.setCurrentTaskBlocked(true, LocaleUtils.tr("editing.unsavedchanged"));
       });
     });
     _defineProperty(_this, "deleteSelectedFeatured", function () {
       _this.setState(function (state) {
-        var features = _this.currentPageFeatures(state).filter(function (feature) {
-          return state.selectedFeatures.has(feature.id);
-        });
-        features.forEach(function (feature) {
-          _this.props.iface.deleteFeature(state.curEditConfig, feature.id, function (success) {
-            _this.onFeatureDeleted(feature.id, success);
+        var featureIds = Object.keys(state.selectedFeatures);
+        featureIds.forEach(function (featureId) {
+          _this.props.iface.deleteFeature(state.curEditConfig, featureId, function (success) {
+            _this.onFeatureDeleted(featureId, success);
           }, state.captchaResponse);
         });
         return {
           deleteTask: {
-            pending: features.map(function (feature) {
-              return feature.id;
-            }),
+            pending: featureIds,
             failed: [],
             deleted: []
           }
@@ -479,7 +480,9 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
             alert(LocaleUtils.tr("attribtable.deletefailed"));
           }
           // Compute new page taking into account number of deleted features
-          newState.currentPage = Math.max(0, state.currentPage - Math.floor(newState.deleteTask.deleted.length / state.pageSize));
+          if (newState.deleteTask.deleted.length >= state.features.length) {
+            newState.currentPage = Math.max(0, state.currentPage - 1);
+          }
           newState.deleteTask = null;
           newState.confirmDelete = false;
           reload = true;
@@ -510,19 +513,8 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
         };
       });
     });
-    _defineProperty(_this, "updateNewFeatureField", function (fieldid, value, emptynull) {
-      _this.setState(function (state) {
-        value = value === "" && emptynull ? null : value;
-        return {
-          newFeature: _objectSpread(_objectSpread({}, state.newFeature), {}, {
-            properties: _objectSpread(_objectSpread({}, state.newFeature.properties), {}, _defineProperty({}, fieldid, value))
-          })
-        };
-      });
-    });
     _defineProperty(_this, "commit", function () {
-      var _this$state$newFeatur;
-      var feature = (_this$state$newFeatur = _this.state.newFeature) !== null && _this$state$newFeatur !== void 0 ? _this$state$newFeatur : _objectSpread(_objectSpread({}, _this.state.features[_this.state.changedFeatureIdx]), {}, {
+      var feature = _objectSpread(_objectSpread({}, _this.state.features[_this.state.changedFeatureIdx]), {}, {
         crs: {
           type: "name",
           properties: {
@@ -531,10 +523,10 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
         }
       });
       Object.keys(feature.properties || {}).forEach(function (name) {
-        var _this$state$curEditCo, _this$state$curEditCo2, _this$state$curEditCo3;
-        var fieldConfig = (_this$state$curEditCo = (_this$state$curEditCo2 = _this.state.curEditConfig.fields) === null || _this$state$curEditCo2 === void 0 || (_this$state$curEditCo3 = _this$state$curEditCo2.find) === null || _this$state$curEditCo3 === void 0 ? void 0 : _this$state$curEditCo3.call(_this$state$curEditCo2, function (f) {
+        var _this$state$curEditCo2, _this$state$curEditCo3, _this$state$curEditCo4;
+        var fieldConfig = (_this$state$curEditCo2 = (_this$state$curEditCo3 = _this.state.curEditConfig.fields) === null || _this$state$curEditCo3 === void 0 || (_this$state$curEditCo4 = _this$state$curEditCo3.find) === null || _this$state$curEditCo4 === void 0 ? void 0 : _this$state$curEditCo4.call(_this$state$curEditCo3, function (f) {
           return f.id === name;
-        })) !== null && _this$state$curEditCo !== void 0 ? _this$state$curEditCo : {};
+        })) !== null && _this$state$curEditCo2 !== void 0 ? _this$state$curEditCo2 : {};
         if (fieldConfig.expression) {
           // Skip virtual fields
           delete feature.properties[name];
@@ -556,7 +548,7 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
       if (_this.state.captchaResponse) {
         featureData.set('g-recaptcha-response', _this.state.captchaResponse);
       }
-      if (_this.state.newFeature) {
+      if (!feature.id) {
         _this.props.iface.addFeatureMultipart(_this.state.curEditConfig, _this.props.mapCrs, featureData, function (success, result) {
           return _this.featureCommited(success, result);
         });
@@ -587,9 +579,11 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_this, "discard", function () {
       _this.changedFiles = {};
       _this.setState(function (state) {
+        var featureidx = state.changedFeatureIdx;
         var newFeatures = _toConsumableArray(state.features);
-        if (!state.newFeature) {
-          var featureidx = state.changedFeatureIdx;
+        if (!newFeatures[featureidx].id) {
+          newFeatures.pop();
+        } else {
           newFeatures[featureidx] = _objectSpread({}, newFeatures[featureidx]);
           newFeatures[featureidx].properties = state.originalFeatureProps;
         }
@@ -604,12 +598,10 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
     });
     _defineProperty(_this, "highlightFeatures", function () {
       var features = [];
-      if (_this.state.highlightedFeature) {
-        features.push(_this.state.highlightedFeature);
-      } else if (!_this.state.selectedFeatures.isEmpty()) {
-        features = _this.currentPageFeatures(_this.state).filter(function (feature) {
-          return _this.state.selectedFeatures.has(feature.id);
-        });
+      if (_this.state.hoveredFeature) {
+        features = [_this.state.hoveredFeature];
+      } else if (!isEmpty(_this.state.selectedFeatures)) {
+        features = Object.values(_this.state.selectedFeatures);
       } else if (_this.state.filterVal) {
         features = _this.state.features;
       }
@@ -627,9 +619,7 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_this, "zoomToSelection", function () {
       var collection = {
         type: "FeatureCollection",
-        features: _this.currentPageFeatures(_this.state).filter(function (feature) {
-          return _this.state.selectedFeatures.has(feature.id);
-        })
+        features: Object.values(_this.state.selectedFeatures)
       };
       if (!isEmpty(collection.features)) {
         if (collection.features.length === 1 && collection.features[0].geometry.type === "Point") {
@@ -647,67 +637,16 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
         alert(LocaleUtils.tr("attribtable.nogeomnoform"));
         return;
       }
-      var feature = _this.currentPageFeatures(_this.state).find(function (f) {
-        return _this.state.selectedFeatures.has(f.id);
-      });
+      var feature = Object.values(_this.state.selectedFeatures)[0];
       _this.props.setCurrentTask("Editing", null, null, {
         layer: _this.state.loadedLayer,
         feature: feature
       });
     });
-    _defineProperty(_this, "resizeTable", function (ev, index, resizeCol) {
-      if (_this.table) {
-        var element = _this.table.getElementsByTagName(resizeCol ? "th" : "tr")[index];
-        var initial = 0;
-        if (resizeCol) {
-          initial = parseFloat(element.style.minWidth.replace(/px$/, '')) || element.clientWidth;
-        } else {
-          initial = parseFloat(element.style.height.replace(/px$/, '')) || element.clientHeight;
-        }
-        var resize = {
-          anchor: resizeCol ? ev.clientX : ev.clientY,
-          element: element,
-          initial: initial,
-          newsize: initial
-        };
-        var contentsEl = element.parentElement.parentElement.parentElement.parentElement;
-        var origin = contentsEl.getBoundingClientRect()[resizeCol ? "left" : "top"];
-        var resizeLine = document.createElement('div');
-        resizeLine.className = resizeCol ? 'attribtable-resize-line-vert' : 'attribtable-resize-line-horiz';
-        resizeLine.style[resizeCol ? "left" : "top"] = resize.anchor - origin + "px";
-        contentsEl.appendChild(resizeLine);
-        var resizeDo = resizeCol ? function (event) {
-          resizeLine.style.left = event.clientX - origin + "px";
-          resize.newsize = resize.initial + event.clientX - resize.anchor;
-        } : function (event) {
-          resizeLine.style.top = event.clientY - origin + "px";
-          resize.newsize = resize.initial + event.clientY - resize.anchor;
-        };
-        var eventShield = ev.view.document.createElement("div");
-        eventShield.className = '__event_shield';
-        ev.view.document.body.appendChild(eventShield);
-        ev.view.document.body.classList.add(resizeCol ? 'ewresizing' : 'nsresizing');
-        ev.view.addEventListener("pointermove", resizeDo);
-        ev.view.addEventListener("pointerup", function (event) {
-          event.view.document.body.removeChild(eventShield);
-          contentsEl.removeChild(resizeLine);
-          event.view.removeEventListener("pointermove", resizeDo);
-          event.view.document.body.classList.remove(resizeCol ? 'ewresizing' : 'nsresizing');
-          if (resizeCol) {
-            resize.element.style.minWidth = Math.max(resize.newsize, 16) + "px";
-            resize.element.style.width = Math.max(resize.newsize, 16) + "px";
-          } else {
-            resize.element.style.height = Math.max(resize.newsize, 16) + "px";
-          }
-        }, {
-          once: true
-        });
-      }
-    });
     _defineProperty(_this, "csvExport", function () {
       var formatCsv = function formatCsv(features) {
-        var _this$state$curEditCo4;
-        var primaryKey = (_this$state$curEditCo4 = _this.state.curEditConfig.primaryKey) !== null && _this$state$curEditCo4 !== void 0 ? _this$state$curEditCo4 : "id";
+        var _this$state$curEditCo5;
+        var primaryKey = (_this$state$curEditCo5 = _this.state.curEditConfig.primaryKey) !== null && _this$state$curEditCo5 !== void 0 ? _this$state$curEditCo5 : "id";
         var fields = _this.props.showDisplayFieldOnly ? _this.state.curEditConfig.fields.filter(function (field) {
           return field.name === _this.state.curEditConfig.displayField;
         }) : _this.state.curEditConfig.fields.filter(function (field) {
@@ -731,38 +670,32 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
           type: "text/plain;charset=utf-8"
         }), _this.state.loadedLayer.split("#").slice(-1)[0] + ".csv");
       };
-      if (_this.state.clientSideData) {
+
+      // Use full-table-load if available
+      if (_this.state.allFeatures) {
         formatCsv(_this.state.allFeatures);
       } else {
-        var _this$props$filter$fi4, _state$curEditConfig, _fieldMap$state$filte, _fieldMap$state$sortF, _state$sortField;
+        var _this$props$filter$fi4, _this$props$filter$fi5;
         var state = _this.state;
         var options = {
           bbox: state.limitToExtent ? _this.props.mapBbox.bounds : null,
           filter: (_this$props$filter$fi4 = _this.props.filter.filterParams) === null || _this$props$filter$fi4 === void 0 ? void 0 : _this$props$filter$fi4[state.loadedLayer],
           filterGeom: _this.props.filter.filterGeom,
-          fields: _this.props.showDisplayFieldOnly ? [state.curEditConfig.displayField, "geometry"] : null
+          fields: _this.props.showDisplayFieldOnly ? [state.curEditConfig.displayField, "geometry"] : null,
+          sortby: state.sortField ? (state.sortField.dir < 0 ? "-" : "") + state.sortField.field : null
         };
-        // If sort or filter field is virtual, query full feature set and sort/filter client side
-        var fieldMap = (((_state$curEditConfig = state.curEditConfig) === null || _state$curEditConfig === void 0 ? void 0 : _state$curEditConfig.fields) || []).reduce(function (res, field) {
-          return _objectSpread(_objectSpread({}, res), {}, _defineProperty({}, field.id, field));
-        }, {});
-        var clientSideFilterSort = state.clientSideData || state.filterVal && ((_fieldMap$state$filte = fieldMap[state.filterField]) === null || _fieldMap$state$filte === void 0 ? void 0 : _fieldMap$state$filte.expression) || ((_fieldMap$state$sortF = fieldMap[(_state$sortField = state.sortField) === null || _state$sortField === void 0 ? void 0 : _state$sortField.field]) === null || _fieldMap$state$sortF === void 0 ? void 0 : _fieldMap$state$sortF.expression);
-        if (!clientSideFilterSort) {
-          var _this$props$filter$fi5;
-          if ((_this$props$filter$fi5 = _this.props.filter.filterParams) !== null && _this$props$filter$fi5 !== void 0 && _this$props$filter$fi5[state.loadedLayer] && state.filterVal) {
-            var _this$props$filter$fi6;
-            options.filter = [(_this$props$filter$fi6 = _this.props.filter.filterParams) === null || _this$props$filter$fi6 === void 0 ? void 0 : _this$props$filter$fi6[_this.state.loadedLayer], 'and', [state.filterField, state.filterOp, state.filterVal]];
-          } else if (state.filterVal) {
-            options.filter = [[state.filterField, state.filterOp, state.filterVal]];
-          }
-          options.sortby = state.sortField ? (state.sortField.dir < 0 ? "-" : "") + state.sortField.field : null;
+        if ((_this$props$filter$fi5 = _this.props.filter.filterParams) !== null && _this$props$filter$fi5 !== void 0 && _this$props$filter$fi5[state.loadedLayer] && state.filterVal) {
+          var _this$props$filter$fi6;
+          options.filter = [(_this$props$filter$fi6 = _this.props.filter.filterParams) === null || _this$props$filter$fi6 === void 0 ? void 0 : _this$props$filter$fi6[_this.state.loadedLayer], 'and', [state.filterField, state.filterOp, state.filterVal]];
+        } else if (state.filterVal) {
+          options.filter = [[state.filterField, state.filterOp, state.filterVal]];
         }
         _this.setState({
           loading: true
         });
         _this.props.iface.getFeatures(_this.state.curEditConfig, _this.props.mapCrs, function (result) {
           if (result) {
-            formatCsv(clientSideFilterSort ? _this.filteredSortedFeatures(result.features, _this.state) : result.features);
+            formatCsv(result.features);
           } else {
             // eslint-disable-next-line
             alert(LocaleUtils.tr("attribtable.loadfailed"));
@@ -797,11 +730,6 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
-      if (this.state.newFeature && !prevState.newFeature) {
-        if (this.attribTableContents) {
-          this.attribTableContents.scrollTop = this.attribTableContents.scrollHeight;
-        }
-      }
       // Reload conditions when limited to extent
       if (this.state.limitToExtent && this.state.loadedLayer && (!prevState.limitToExtent || this.props.mapBbox !== prevProps.mapBbox)) {
         this.reload(this.state.loadedLayer, true, {
@@ -813,7 +741,7 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
         });
       }
       // Highlight feature
-      if (this.state.highlightedFeature !== prevState.highlightedFeature || this.state.features !== prevState.features || this.state.selectedFeatures !== prevState.selectedFeatures) {
+      if (this.state.features !== prevState.features || this.state.hoveredFeature !== prevState.hoveredFeature || this.state.selectedFeatures !== prevState.selectedFeatures) {
         this.highlightFeatures();
       }
       if (this.state.loadedLayer !== prevState.loadedLayer && this.props.showDisplayFieldOnly) {
@@ -838,10 +766,10 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
       var captchaPending = captchaRequired && !this.state.captchaResponse;
       var curEditConfig = this.state.curEditConfig;
       var editPermissions = (curEditConfig === null || curEditConfig === void 0 ? void 0 : curEditConfig.permissions) || {};
-      var readOnly = this.props.readOnly || editPermissions.updatable === false;
+      var readOnly = this.props.readOnly || editPermissions.updatable === false || this.state.confirmDelete;
       var loading = this.state.loading;
-      var editing = this.state.changedFeatureIdx !== null || this.state.newFeature !== null;
-      var selectionEmpty = this.state.selectedFeatures.isEmpty();
+      var editing = this.state.changedFeatureIdx !== null;
+      var selectionEmpty = isEmpty(this.state.selectedFeatures);
       var showIdColumn = !this.props.showDisplayFieldOnly && !this.props.hideIdColumn;
       var loadOverlay = null;
       if (loading) {
@@ -860,116 +788,22 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
       var table = null;
       var footbar = null;
       if (curEditConfig && this.state.features && this.state.selectedLayer === this.state.loadedLayer) {
-        var _curEditConfig$primar, _fieldConfig$constrai, _fieldConfig$constrai2;
-        var primaryKey = (_curEditConfig$primar = curEditConfig.primaryKey) !== null && _curEditConfig$primar !== void 0 ? _curEditConfig$primar : "id";
-        var mapPrefix = this.state.curEditConfig.editDataset.split(".")[0];
-        var fields = this.props.showDisplayFieldOnly ? curEditConfig.fields.filter(function (field) {
-          return field.name === curEditConfig.displayField;
-        }) : curEditConfig.fields.filter(function (field) {
-          var _field$constraints;
-          return field.id !== primaryKey && (_this2.props.showHiddenFields || ((_field$constraints = field.constraints) === null || _field$constraints === void 0 ? void 0 : _field$constraints.hidden) !== true);
-        });
-        var indexOffset = this.state.currentPage * this.state.pageSize;
-        var features = this.state.features.slice(indexOffset, indexOffset + this.state.pageSize);
-        table = /*#__PURE__*/React.createElement(TextInputInitContext.Provider, {
-          value: {
-            register: function register(uuid) {
-              return _this2.pendingTextEdits.add(uuid);
-            },
-            notifyReady: function notifyReady(uuid) {
-              _this2.pendingTextEdits["delete"](uuid);
-              if (_this2.pendingTextEdits.size === 0) {
-                _this2.setState({
-                  tableReady: true
-                });
-              }
-            }
-          }
-        }, /*#__PURE__*/React.createElement("div", {
-          style: {
-            display: "none"
-          }
-        }, /*#__PURE__*/React.createElement(TextInput, {
-          onChange: function onChange() {},
-          value: "x"
-        })), /*#__PURE__*/React.createElement("table", {
+        var _fieldConfig$constrai, _fieldConfig$constrai2;
+        var primaryKey = curEditConfig.primaryKey;
+        table = /*#__PURE__*/React.createElement(FeaturesTable, {
           className: "attribtable-table",
-          ref: function ref(el) {
-            _this2.table = el;
-          },
-          style: {
-            display: this.state.tableReady ? '' : 'none'
-          }
-        }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null), showIdColumn ? /*#__PURE__*/React.createElement("th", {
-          onClick: function onClick() {
-            return _this2.sortBy(primaryKey);
-          },
-          onKeyDown: MiscUtils.checkKeyActivate,
-          tabIndex: 0,
-          title: this.translateFieldName(primaryKey)
-        }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", {
-          className: "attribtable-table-headername"
-        }, this.translateFieldName(primaryKey)), this.renderSortIndicator(primaryKey), this.renderColumnResizeHandle(1, 'r'))) : null, fields.map(function (field, idx) {
-          return /*#__PURE__*/React.createElement("th", {
-            key: field.id,
-            onClick: function onClick() {
-              return _this2.sortBy(field.id);
-            },
-            onKeyDown: MiscUtils.checkKeyActivate,
-            tabIndex: 0,
-            title: _this2.translateFieldName(field.name)
-          }, /*#__PURE__*/React.createElement("span", null, _this2.renderColumnResizeHandle(idx + 1, 'l'), /*#__PURE__*/React.createElement("span", {
-            className: "attribtable-table-headername"
-          }, _this2.translateFieldName(field.name), field.expression ? /*#__PURE__*/React.createElement(Icon, {
-            icon: "epsilon",
-            title: LocaleUtils.tr("attribtable.calculatedfield")
-          }) : null), _this2.renderSortIndicator(field.id), idx < fields.length - 1 ? _this2.renderColumnResizeHandle(idx + (showIdColumn ? 2 : 1), 'r') : null));
-        }))), /*#__PURE__*/React.createElement("tbody", null, features.map(function (feature, sliceidx) {
-          var featureidx = indexOffset + sliceidx;
-          var disabled = readOnly || editing && _this2.state.changedFeatureIdx !== featureidx;
-          var updateField = function updateField(fieldid, val) {
-            var emptynull = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-            return _this2.updateField(featureidx, fieldid, val, emptynull);
-          };
-          return /*#__PURE__*/React.createElement("tr", {
-            className: disabled && !_this2.props.readOnly ? "row-disabled" : "",
-            key: feature.id,
-            onMouseEnter: function onMouseEnter() {
-              return _this2.setState({
-                highlightedFeature: feature
-              });
-            },
-            onMouseLeave: function onMouseLeave() {
-              return _this2.setState(function (state) {
-                return {
-                  highlightedFeature: state.highlightedFeature === feature ? null : state.highlightedFeature
-                };
-              });
-            }
-          }, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("span", null, sliceidx > 0 ? _this2.renderRowResizeHandle(sliceidx, 't') : null, /*#__PURE__*/React.createElement("input", {
-            checked: _this2.state.selectedFeatures.has(feature.id),
-            onChange: function onChange() {
-              return _this2.setState(function (state) {
-                return {
-                  selectedFeatures: state.selectedFeatures.toggle(feature.id)
-                };
-              });
-            },
-            type: "checkbox"
-          }), _this2.renderRowResizeHandle(sliceidx + 1, 'b'))), showIdColumn ? /*#__PURE__*/React.createElement("td", null, feature.id) : null, fields.map(function (field) {
-            return /*#__PURE__*/React.createElement("td", {
-              key: field.id
-            }, _this2.renderField(feature, curEditConfig, mapPrefix, field, updateField, disabled || !!_this2.state.filterVal && field.id === _this2.state.filterField));
-          }));
-        }), this.state.newFeature ? /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("span", null, features.length > 0 ? this.renderRowResizeHandle(features.length, 't') : null, /*#__PURE__*/React.createElement("input", {
-          disabled: true,
-          type: "checkbox"
-        }), this.renderRowResizeHandle(features.length + 1, 'b'))), showIdColumn ? /*#__PURE__*/React.createElement("td", null, this.state.newFeature.id) : null, fields.map(function (field) {
-          return /*#__PURE__*/React.createElement("td", {
-            key: field.id
-          }, _this2.renderField(_this2.state.newFeature, curEditConfig, mapPrefix, field, _this2.updateNewFeatureField, false));
-        })) : null)));
-        var npages = this.state.featureCount;
+          features: this.state.features,
+          fields: this.state.curFields,
+          hideIdColumn: !showIdColumn,
+          hoverChanged: this.setHoveredFeature,
+          onSort: this.sortBy,
+          primaryKey: primaryKey,
+          readOnly: readOnly,
+          renderField: this.renderField,
+          rowIsDisabled: this.rowIsDisabled,
+          selectionChanged: this.setSelectedFeatures
+        });
+        var npages = Math.ceil(this.state.totFeatureCount / this.state.pageSize);
         var pages = [this.state.currentPage];
         var extraright = Math.max(0, 2 - this.state.currentPage);
         var extraleft = Math.max(0, this.state.currentPage - (npages - 3));
@@ -1031,7 +865,7 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
           },
           pageSize: this.state.pageSize,
           pageSizeChanged: function pageSizeChanged(pageSize) {
-            return _this2.setState({
+            return _this2.reload(_this2.state.selectedLayer, false, {
               pageSize: pageSize,
               currentPage: 0
             });
@@ -1051,11 +885,14 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
           value: ""
         }, LocaleUtils.tr("common.select")), showIdColumn ? /*#__PURE__*/React.createElement("option", {
           value: "<id>"
-        }, this.translateFieldName(primaryKey)) : null, fields.map(function (field) {
-          return /*#__PURE__*/React.createElement("option", {
-            key: field.id,
-            value: field.id
-          }, _this2.translateFieldName(field.name));
+        }, this.translateFieldName(primaryKey)) : null, this.state.curFields.map(function (field) {
+          if (field.id !== primaryKey) {
+            return /*#__PURE__*/React.createElement("option", {
+              key: field.id,
+              value: field.id
+            }, _this2.translateFieldName(field.name));
+          }
+          return null;
         })), /*#__PURE__*/React.createElement("select", {
           disabled: footbarDisabled,
           onChange: function onChange(ev) {
@@ -1192,7 +1029,7 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
         icon: "search"
       })), showEditButton ? /*#__PURE__*/React.createElement("button", {
         className: "button",
-        disabled: layerChanged || editing || this.state.selectedFeatures.size() !== 1,
+        disabled: layerChanged || editing || Object.keys(this.state.selectedFeatures).length !== 1,
         onClick: this.switchToFormEditMode,
         title: LocaleUtils.tr("attribtable.formeditmode")
       }, /*#__PURE__*/React.createElement(Icon, {
@@ -1290,12 +1127,13 @@ _defineProperty(AttributeTableWidget, "defaultState", {
   selectedLayer: "",
   loadedLayer: "",
   curEditConfig: null,
+  curFields: null,
   fieldTranslations: null,
   features: [],
-  featureCount: 0,
   allFeatures: null,
-  selectedFeatures: new ToggleSet(),
-  highlightedFeature: null,
+  totFeatureCount: 0,
+  selectedFeatures: {},
+  hoveredFeature: null,
   changedFeatureIdx: null,
   originalFeatureProps: null,
   pageSize: 50,
@@ -1305,11 +1143,9 @@ _defineProperty(AttributeTableWidget, "defaultState", {
   filterVal: "",
   sortField: null,
   deleteTask: null,
-  newFeature: null,
   confirmDelete: false,
   limitToExtent: false,
   captchaResponse: '',
-  clientSideData: false,
   tableReady: false
 });
 export default connect(function (state) {