@kaspernj/api-maker 1.0.2054 → 1.0.2055

package/build/table/table.js

@@ -1,810 +1,612 @@
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { digg, digs } from "diggerize";
+import React, { createContext, useContext, useMemo, useRef } from "react";
+import { Animated, Platform, Pressable, View } from "react-native";
+import BaseComponent from "../base-component.js";
+import Card from "../bootstrap/card";
+import classNames from "classnames";
+import Collection from "../collection.js";
+import columnVisible from "./column-visible.js";
+import debounce from "debounce";
+import DraggableSort from "../draggable-sort/index";
+import EventEmitter from "events";
+import Filters from "./filters/index";
+import FlatList from "./components/flat-list";
+import { Form } from "../form";
+import Header from "./components/header";
+import HeaderColumn from "./header-column";
+import HeaderSelect from "./header-select";
+import Icon from "../utils/icon";
+import { incorporate } from "incorporator";
+import * as inflection from "inflection";
+import memo from "set-state-compare/build/memo.js";
+import modelClassRequire from "../model-class-require.js";
+import ModelRow from "./model-row";
+import Paginate from "../bootstrap/paginate";
+import Params from "../params.js";
+import PropTypes from "prop-types";
+import Row from "./components/row";
+import selectCalculator from "./select-calculator.js";
+import Select from "../inputs/select";
+import Settings from "./settings/index";
+import { shapeComponent } from "set-state-compare/build/shape-component.js";
+import TableSettings from "./table-settings.js";
+import Text from "../utils/text";
+import uniqunize from "uniqunize";
+import useBreakpoint from "../use-breakpoint.js";
+import useCollection from "../use-collection.js";
+import useI18n from "i18n-on-steroids/src/use-i18n.mjs";
+import useEventEmitter from "../use-event-emitter.js";
+import useModelEvent from "../use-model-event.js";
+import useQueryParams from "on-location-changed/build/use-query-params.js";
+import Widths from "./widths.js";
+import WorkerPluginsCheckAllCheckbox from "./worker-plugins-check-all-checkbox";
+const paginationOptions = [30, 60, 90, ["All", "all"]];
+const TableContext = createContext();
+const ListHeaderComponent = memo(shapeComponent(class ListHeaderComponent extends BaseComponent {
+    setup() {
+        this.useStates({
+            lastUpdate: new Date()
+        });
+    }
+    render() {
+        const { mdUp } = useBreakpoint();
+        const tableContextValue = useContext(TableContext);
+        const table = tableContextValue.table;
+        const { collection, events, queryWithoutPagination, t } = table.tt;
+        const { query } = digs(collection, "query");
+        useEventEmitter(events, "columnVisibilityUpdated", this.tt.onColumnVisibilityUpdated);
+        return (_jsxs(Row, { style: table.styleForRowHeader(), testID: "api-maker/table/header-row", children: [table.p.workplace && table.s.currentWorkplace &&
+                    _jsxs(Header, { style: table.styleForHeader({ style: { width: mdUp ? 41 : undefined } }), children: [_jsx(WorkerPluginsCheckAllCheckbox, { currentWorkplace: table.s.currentWorkplace, query: queryWithoutPagination, style: this.workerPlguinsCheckAllCheckboxStyle ||= { marginHorizontal: "auto" } }), !mdUp &&
+                                _jsx(Text, { style: this.selectAllFoundTextStyle ||= { marginLeft: 3 }, children: t(".select_all_found", { defaultValue: "Select all found" }) })] }), !mdUp &&
+                    _jsx(Header, { style: table.styleForHeader({ style: {} }), children: _jsx(HeaderSelect, { preparedColumns: table.s.preparedColumns, query: query, table: table }) }), mdUp &&
+                    _jsxs(_Fragment, { children: [table.headersContentFromColumns(), _jsx(Header, { style: table.styleForHeader({ style: {}, type: "actions" }) })] })] }));
     }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
+    onColumnVisibilityUpdated = () => this.setState({ lastUpdate: new Date() });
 }));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
+export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
+    static defaultProps = {
+        card: true,
+        currentUser: null,
+        destroyEnabled: true,
+        filterCard: true,
+        filterSubmitButton: true,
+        noRecordsAvailableContent: undefined,
+        noRecordsFoundContent: undefined,
+        preloads: [],
+        select: {},
+        styleUI: true,
+        workplace: false
     };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
+    static propTypes = {
+        abilities: PropTypes.object,
+        actionsContent: PropTypes.func,
+        appHistory: PropTypes.object,
+        card: PropTypes.bool.isRequired,
+        className: PropTypes.string,
+        collection: PropTypes.instanceOf(Collection),
+        columns: PropTypes.oneOfType([PropTypes.array, PropTypes.func]),
+        controls: PropTypes.func,
+        currentUser: PropTypes.object,
+        defaultDateFormatName: PropTypes.string,
+        defaultDateTimeFormatName: PropTypes.string,
+        defaultParams: PropTypes.object,
+        destroyEnabled: PropTypes.bool.isRequired,
+        destroyMessage: PropTypes.string,
+        editModelPath: PropTypes.func,
+        filterCard: PropTypes.bool.isRequired,
+        filterContent: PropTypes.func,
+        filterSubmitLabel: PropTypes.any,
+        groupBy: PropTypes.array,
+        header: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+        identifier: PropTypes.string,
+        modelClass: PropTypes.func.isRequired,
+        noRecordsAvailableContent: PropTypes.func,
+        noRecordsFoundContent: PropTypes.func,
+        onModelsLoaded: PropTypes.func,
+        paginateContent: PropTypes.func,
+        paginationComponent: PropTypes.func,
+        preloads: PropTypes.array.isRequired,
+        queryMethod: PropTypes.func,
+        queryName: PropTypes.string,
+        select: PropTypes.object,
+        selectColumns: PropTypes.object,
+        styles: PropTypes.object,
+        styleUI: PropTypes.bool.isRequired,
+        viewModelPath: PropTypes.func,
+        workplace: PropTypes.bool.isRequired
     };
-})();
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
+    draggableSortEvents = new EventEmitter();
+    events = new EventEmitter();
+    tableSettings = null;
+    setup() {
+        const { t } = useI18n({ namespace: "js.api_maker.table" });
+        const { name: breakpoint, mdUp } = useBreakpoint();
+        const queryParams = useQueryParams();
+        this.setInstance({
+            breakpoint,
+            filterFormRef: useRef(),
+            mdUp,
+            t
+        });
+        const collectionKey = digg(this.p.modelClass.modelClassData(), "collectionKey");
+        let queryName = this.props.queryName;
+        if (!queryName)
+            queryName = collectionKey;
+        const querySName = `${queryName}_s`;
+        this.useStates({
+            columns: () => this.columnsAsArray(),
+            currentWorkplace: undefined,
+            currentWorkplaceCount: null,
+            filterForm: null,
+            columnsToShow: null,
+            draggedColumn: null,
+            identifier: () => this.props.identifier || `${collectionKey}-default`,
+            lastUpdate: () => new Date(),
+            preload: undefined,
+            preparedColumns: undefined,
+            queryName,
+            queryQName: () => `${queryName}_q`,
+            queryPageName: () => `${queryName}_page`,
+            querySName,
+            resizing: false,
+            showFilters: () => Boolean(queryParams[querySName]),
+            showSettings: false,
+            tableSetting: undefined,
+            tableSettingLoaded: false,
+            tableSettingFullCacheKey: undefined,
+            width: undefined,
+            widths: null
+        });
+        this.tableContextValue = useMemo(() => ({
+            cacheKey: this.s.tableSettingFullCacheKey,
+            lastUpdate: this.s.lastUpdate,
+            resizing: this.s.resizing,
+            table: this
+        }), [this.s.lastUpdate, this.s.resizing, this.s.tableSettingFullCacheKey]);
+        useMemo(() => {
+            if (this.props.workplace) {
+                this.loadCurrentWorkplace().then(() => {
+                    this.loadCurrentWorkplaceCount();
+                });
             }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
+        }, [this.p.currentUser?.id()]);
+        useMemo(() => {
+            if (!this.tt.tableSettings && this.s.width) {
+                this.loadTableSetting();
+            }
+        }, [this.p.currentUser?.id(), this.s.width]);
+        useModelEvent(this.s.currentWorkplace, "workplace_links_created", this.tt.onLinksCreated);
+        useModelEvent(this.s.currentWorkplace, "workplace_links_destroyed", this.tt.onLinksDestroyed);
+        let collectionReady = true;
+        let select;
+        if (!this.s.preparedColumns) {
+            collectionReady = false;
         }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-var _a;
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var diggerize_1 = require("diggerize");
-var react_1 = __importStar(require("react"));
-var react_native_1 = require("react-native");
-var base_component_js_1 = __importDefault(require("../base-component.js"));
-var card_1 = __importDefault(require("../bootstrap/card"));
-var classnames_1 = __importDefault(require("classnames"));
-var collection_js_1 = __importDefault(require("../collection.js"));
-var column_visible_js_1 = __importDefault(require("./column-visible.js"));
-var debounce_1 = __importDefault(require("debounce"));
-var index_1 = __importDefault(require("../draggable-sort/index"));
-var events_1 = __importDefault(require("events"));
-var index_2 = __importDefault(require("./filters/index"));
-var flat_list_1 = __importDefault(require("./components/flat-list"));
-var form_1 = require("../form");
-var header_1 = __importDefault(require("./components/header"));
-var header_column_1 = __importDefault(require("./header-column"));
-var header_select_1 = __importDefault(require("./header-select"));
-var icon_1 = __importDefault(require("../utils/icon"));
-var incorporator_1 = require("incorporator");
-var inflection = __importStar(require("inflection"));
-var memo_js_1 = __importDefault(require("set-state-compare/build/memo.js"));
-var model_class_require_js_1 = __importDefault(require("../model-class-require.js"));
-var model_row_1 = __importDefault(require("./model-row"));
-var paginate_1 = __importDefault(require("../bootstrap/paginate"));
-var params_js_1 = __importDefault(require("../params.js"));
-var prop_types_1 = __importDefault(require("prop-types"));
-var row_1 = __importDefault(require("./components/row"));
-var select_calculator_js_1 = __importDefault(require("./select-calculator.js"));
-var select_1 = __importDefault(require("../inputs/select"));
-var index_3 = __importDefault(require("./settings/index"));
-var shape_component_js_1 = require("set-state-compare/build/shape-component.js");
-var table_settings_js_1 = __importDefault(require("./table-settings.js"));
-var text_1 = __importDefault(require("../utils/text"));
-var uniqunize_1 = __importDefault(require("uniqunize"));
-var use_breakpoint_js_1 = __importDefault(require("../use-breakpoint.js"));
-var use_collection_js_1 = __importDefault(require("../use-collection.js"));
-var use_i18n_mjs_1 = __importDefault(require("i18n-on-steroids/src/use-i18n.mjs"));
-var use_event_emitter_js_1 = __importDefault(require("../use-event-emitter.js"));
-var use_model_event_js_1 = __importDefault(require("../use-model-event.js"));
-var use_query_params_js_1 = __importDefault(require("on-location-changed/build/use-query-params.js"));
-var widths_js_1 = __importDefault(require("./widths.js"));
-var worker_plugins_check_all_checkbox_1 = __importDefault(require("./worker-plugins-check-all-checkbox"));
-var paginationOptions = [30, 60, 90, ["All", "all"]];
-var TableContext = (0, react_1.createContext)();
-var ListHeaderComponent = (0, memo_js_1.default)((0, shape_component_js_1.shapeComponent)(/** @class */ (function (_super) {
-    __extends(ListHeaderComponent, _super);
-    function ListHeaderComponent() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.onColumnVisibilityUpdated = function () { return _this.setState({ lastUpdate: new Date() }); };
-        return _this;
+        if (collectionReady) {
+            select = selectCalculator({ table: this });
+        }
+        this.collection = useCollection({
+            abilities: this.abilitiesToLoad(),
+            defaultParams: this.props.defaultParams,
+            collection: this.props.collection,
+            groupBy: this.props.groupBy,
+            ifCondition: collectionReady,
+            modelClass: this.props.modelClass,
+            onModelsLoaded: this.props.onModelsLoaded,
+            noRecordsAvailableContent: this.props.noRecordsAvailableContent,
+            noRecordsFoundContent: this.props.noRecordsFoundContent,
+            pagination: true,
+            preloads: this.state.preload,
+            queryMethod: this.props.queryMethod,
+            queryName,
+            select,
+            selectColumns: this.props.selectColumns
+        });
+        this.queryWithoutPagination = useMemo(() => this.collection?.query?.clone()?.except("page"), [this.collection.query]);
+        useEventEmitter(this.tt.draggableSortEvents, "onDragStart", this.tt.onDragStart);
+        useEventEmitter(this.tt.draggableSortEvents, "onDragEndAnimation", this.tt.onDragEndAnimation);
+        useEventEmitter(this.tt.events, "columnVisibilityUpdated", this.tt.onColumnVisibilityUpdated);
     }
-    ListHeaderComponent.prototype.setup = function () {
-        this.useStates({
-            lastUpdate: new Date()
+    onColumnVisibilityUpdated = () => this.setState({ columnsToShow: this.getColumnsToShow(this.s.columns), lastUpdate: new Date() });
+    onDragStart = ({ item }) => item.animatedZIndex.setValue(9999);
+    onDragEndAnimation = ({ item }) => item.animatedZIndex.setValue(0);
+    async loadCurrentWorkplace() {
+        const Workplace = modelClassRequire("Workplace");
+        const result = await Workplace.current();
+        const currentWorkplace = digg(result, "current", 0);
+        this.setState({ currentWorkplace });
+    }
+    async loadCurrentWorkplaceCount() {
+        const WorkplaceLink = modelClassRequire("WorkplaceLink");
+        const currentWorkplaceCount = await WorkplaceLink
+            .ransack({
+            resource_type_eq: this.p.modelClass.modelClassData().name,
+            workplace_id_eq: this.s.currentWorkplace.id()
+        })
+            .count();
+        this.setState({ currentWorkplaceCount });
+    }
+    getColumnsToShow(columns) {
+        return columns
+            .filter(({ column, tableSettingColumn }) => columnVisible(column, tableSettingColumn))
+            .sort((a, b) => a.tableSettingColumn.position() - b.tableSettingColumn.position());
+    }
+    async loadTableSetting() {
+        this.tableSettings = new TableSettings({ table: this });
+        const tableSetting = await this.tableSettings.loadExistingOrCreateTableSettings();
+        const { columns, preload } = this.tableSettings.preparedColumns(tableSetting);
+        const { width } = this.s;
+        const widths = new Widths({ columns, table: this, width });
+        const columnsToShow = this.getColumnsToShow(columns);
+        this.setState({
+            columns,
+            columnsToShow,
+            preparedColumns: columns,
+            preload: this.mergedPreloads(preload),
+            tableSetting,
+            tableSettingLoaded: true,
+            tableSettingFullCacheKey: tableSetting.fullCacheKey(),
+            widths
         });
+    }
+    updateSettingsFullCacheKey = () => this.setState({ tableSettingFullCacheKey: this.state.tableSetting.fullCacheKey() });
+    columnsAsArray = () => {
+        if (typeof this.props.columns == "function") {
+            return this.props.columns();
+        }
+        return this.props.columns;
     };
-    ListHeaderComponent.prototype.render = function () {
-        var mdUp = (0, use_breakpoint_js_1.default)().mdUp;
-        var tableContextValue = (0, react_1.useContext)(TableContext);
-        var table = tableContextValue.table;
-        var _b = table.tt, collection = _b.collection, events = _b.events, queryWithoutPagination = _b.queryWithoutPagination, t = _b.t;
-        var query = (0, diggerize_1.digs)(collection, "query").query;
-        (0, use_event_emitter_js_1.default)(events, "columnVisibilityUpdated", this.tt.onColumnVisibilityUpdated);
-        return ((0, jsx_runtime_1.jsxs)(row_1.default, { style: table.styleForRowHeader(), testID: "api-maker/table/header-row", children: [table.p.workplace && table.s.currentWorkplace &&
-                    (0, jsx_runtime_1.jsxs)(header_1.default, { style: table.styleForHeader({ style: { width: mdUp ? 41 : undefined } }), children: [(0, jsx_runtime_1.jsx)(worker_plugins_check_all_checkbox_1.default, { currentWorkplace: table.s.currentWorkplace, query: queryWithoutPagination, style: this.workerPlguinsCheckAllCheckboxStyle || (this.workerPlguinsCheckAllCheckboxStyle = { marginHorizontal: "auto" }) }), !mdUp &&
-                                (0, jsx_runtime_1.jsx)(text_1.default, { style: this.selectAllFoundTextStyle || (this.selectAllFoundTextStyle = { marginLeft: 3 }), children: t(".select_all_found", { defaultValue: "Select all found" }) })] }), !mdUp &&
-                    (0, jsx_runtime_1.jsx)(header_1.default, { style: table.styleForHeader({ style: {} }), children: (0, jsx_runtime_1.jsx)(header_select_1.default, { preparedColumns: table.s.preparedColumns, query: query, table: table }) }), mdUp &&
-                    (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [table.headersContentFromColumns(), (0, jsx_runtime_1.jsx)(header_1.default, { style: table.styleForHeader({ style: {}, type: "actions" }) })] })] }));
-    };
-    return ListHeaderComponent;
-}(base_component_js_1.default))));
-exports.default = (0, memo_js_1.default)((0, shape_component_js_1.shapeComponent)((_a = /** @class */ (function (_super) {
-        __extends(ApiMakerTable, _super);
-        function ApiMakerTable() {
-            var _this = _super !== null && _super.apply(this, arguments) || this;
-            _this.draggableSortEvents = new events_1.default();
-            _this.events = new events_1.default();
-            _this.tableSettings = null;
-            _this.onColumnVisibilityUpdated = function () { return _this.setState({ columnsToShow: _this.getColumnsToShow(_this.s.columns), lastUpdate: new Date() }); };
-            _this.onDragStart = function (_b) {
-                var item = _b.item;
-                return item.animatedZIndex.setValue(9999);
-            };
-            _this.onDragEndAnimation = function (_b) {
-                var item = _b.item;
-                return item.animatedZIndex.setValue(0);
-            };
-            _this.updateSettingsFullCacheKey = function () { return _this.setState({ tableSettingFullCacheKey: _this.state.tableSetting.fullCacheKey() }); };
-            _this.columnsAsArray = function () {
-                if (typeof _this.props.columns == "function") {
-                    return _this.props.columns();
-                }
-                return _this.props.columns;
-            };
-            _this.onContainerLayout = function (e) {
-                var width = e.nativeEvent.layout.width;
-                var widths = _this.s.widths;
-                _this.setState({ width: width });
-                if (widths)
-                    widths.tableWidth = width;
-            };
-            _this.onLinksCreated = function (_b) {
-                var args = _b.args;
-                var modelClassName = _this.p.modelClass.modelClassData().name;
-                if (args.created[modelClassName]) {
-                    var amountCreated_1 = args.created[modelClassName].length;
-                    _this.setState(function (prevState) { return ({
-                        currentWorkplaceCount: prevState.currentWorkplaceCount + amountCreated_1
-                    }); });
-                }
-            };
-            _this.onLinksDestroyed = function (_b) {
-                var args = _b.args;
-                var modelClassName = _this.p.modelClass.modelClassData().name;
-                if (args.destroyed[modelClassName]) {
-                    var amountDestroyed_1 = args.destroyed[modelClassName].length;
-                    _this.setState(function (prevState) { return ({
-                        currentWorkplaceCount: prevState.currentWorkplaceCount - amountDestroyed_1
-                    }); });
-                }
-            };
-            _this.keyExtrator = function (model) { return "".concat(_this.s.tableSettingFullCacheKey, "-").concat(model.id()); };
-            _this.filterForm = function () {
-                var _b = _this.tt, filterFormRef = _b.filterFormRef, submitFilter = _b.submitFilter, submitFilterDebounce = _b.submitFilterDebounce;
-                var _c = _this.p, filterContent = _c.filterContent, filterSubmitButton = _c.filterSubmitButton;
-                var queryQName = _this.s.queryQName;
-                var filterSubmitLabel = _this.props.filterSubmitLabel;
-                var qParams = (0, diggerize_1.digs)(_this.collection, "qParams").qParams;
-                return ((0, jsx_runtime_1.jsxs)(form_1.Form, { className: "live-table--filter-form", formRef: filterFormRef, onSubmit: _this.tt.onFilterFormSubmit, setForm: _this.setStates.filterForm, children: ["s" in qParams &&
-                            (0, jsx_runtime_1.jsx)("input", { name: "s", type: "hidden", value: qParams.s }), filterContent({
-                            onFilterChanged: submitFilter,
-                            onFilterChangedWithDelay: submitFilterDebounce,
-                            qParams: qParams,
-                            queryQName: queryQName
-                        }), filterSubmitButton &&
-                            (0, jsx_runtime_1.jsx)("input", { className: "btn btn-primary live-table--submit-filter-button", type: "submit", style: { marginTop: "8px" }, value: filterSubmitLabel || _this.t(".filter", { defaultValue: "Filter" }) })] }));
-            };
-            _this.onFilterClicked = function (e) {
-                e.preventDefault();
-                _this.setState({ showFilters: !_this.state.showFilters });
-            };
-            _this.onPerPageChanged = function (e) {
-                var queryName = _this.s.queryName;
-                var newPerPageValue = (0, diggerize_1.digg)(e, "target", "value");
-                var perKey = "".concat(queryName, "_per");
-                var paramsChange = {};
-                paramsChange[perKey] = newPerPageValue;
-                params_js_1.default.changeParams(paramsChange);
-            };
-            _this.renderItem = function (_b) {
-                var index = _b.index, model = _b.item;
-                if (!_this.s.tableSettingLoaded) {
-                    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { children: (0, jsx_runtime_1.jsx)(text_1.default, { children: _this.t(".loading_dot_dot_dot", { defaultValue: "Loading..." }) }) }));
-                }
-                return ((0, jsx_runtime_1.jsx)(model_row_1.default, { cacheKey: model.cacheKey(), columns: _this.s.columnsToShow, columnWidths: _this.columnWidths(), events: _this.tt.events, index: index, model: model, table: _this, tableSettingFullCacheKey: _this.s.tableSettingFullCacheKey }, model.id()));
-            };
-            _this.styleForColumn = function (_b) {
-                var column = _b.column, columnIndex = _b.columnIndex, even = _b.even, style = _b.style, type = _b.type;
-                var styleUI = _this.p.styleUI;
-                var defaultStyle = {
-                    justifyContent: "center",
-                    padding: 8,
-                    overflow: "hidden"
-                };
-                if (styleUI) {
-                    Object.assign(defaultStyle, {
-                        backgroundColor: even ? "#f5f5f5" : "#fff"
-                    });
-                }
-                if (type == "actions") {
-                    defaultStyle.flexDirection = "row";
-                    defaultStyle.alignItems = "center";
-                    if (_this.tt.mdUp) {
-                        defaultStyle.marginLeft = "auto";
+    mergedPreloads(preload) {
+        const { preloads } = this.props;
+        let mergedPreloads = [];
+        if (preloads)
+            mergedPreloads = mergedPreloads.concat(preloads);
+        if (preload)
+            mergedPreloads = mergedPreloads.concat(preload);
+        return uniqunize(mergedPreloads);
+    }
+    render() {
+        const { modelClass, noRecordsAvailableContent, noRecordsFoundContent } = this.p;
+        const { collection, currentUser } = this.props;
+        const { queryName, querySName, showFilters } = this.s;
+        const { models, overallCount, qParams, query, result, showNoRecordsAvailableContent, showNoRecordsFoundContent } = digs(this.collection, "models", "overallCount", "qParams", "query", "result", "showNoRecordsAvailableContent", "showNoRecordsFoundContent");
+        if (collection && collection.args.modelClass.modelClassData().name != modelClass.modelClassData().name) {
+            throw new Error(`Model class from collection '${collection.args.modelClass.modelClassData().name}' ` +
+                `didn't match model class on table: '${modelClass.modelClassData().name}'`);
+        }
+        return (_jsxs(View, { dataSet: this.cache("rootViewDataSet", { class: this.className() }, [this.className()]), onLayout: this.tt.onContainerLayout, style: this.props.styles?.container, children: [showNoRecordsAvailableContent &&
+                    _jsx("div", { className: "live-table--no-records-available-content", children: noRecordsAvailableContent({ models, qParams, overallCount }) }), showNoRecordsFoundContent &&
+                    _jsx("div", { className: "live-table--no-records-found-content", children: noRecordsFoundContent({ models, qParams, overallCount }) }), showFilters &&
+                    _jsx(Filters, { currentUser: currentUser, modelClass: modelClass, queryName: queryName, querySName: querySName }), (() => {
+                    if (qParams && query && result && models && !showNoRecordsAvailableContent && !showNoRecordsFoundContent) {
+                        return this.cardOrTable();
                     }
                     else {
-                        defaultStyle.marginRight = "auto";
+                        return (_jsx(View, { children: _jsx(Text, { children: this.t(".loading_dot_dot_dit", { defaultValue: "Loading..." }) }) }));
                     }
-                }
-                else if (_this.tt.mdUp && styleUI) {
-                    defaultStyle.borderRight = "1px solid #dbdbdb";
-                }
-                var actualStyle = Object.assign(defaultStyle, style);
-                return actualStyle;
-            };
-            _this.styleForHeader = function (_b) {
-                var column = _b.column, columnIndex = _b.columnIndex, style = _b.style, type = _b.type;
-                var mdUp = _this.tt.mdUp;
-                var defaultStyle = {
-                    flexDirection: "row",
-                    alignItems: "center",
-                    padding: 8
-                };
-                if (type != "actions" && mdUp && _this.p.styleUI) {
-                    defaultStyle.borderRight = "1px solid #dbdbdb";
-                }
-                var actualStyle = Object.assign(defaultStyle, style);
-                return actualStyle;
-            };
-            _this.styleForRow = function (_b) {
-                var _c = _b === void 0 ? {} : _b, even = _c.even;
-                var actualStyle = {
-                    flex: 1,
-                    alignItems: "stretch"
-                };
-                if (even && _this.p.styleUI) {
-                    actualStyle.backgroundColor = "#f5f5f5";
-                }
-                return actualStyle;
-            };
-            _this.styleForRowHeader = function () {
-                var actualStyle = {
-                    flex: 1,
-                    alignItems: "stretch"
-                };
-                return actualStyle;
-            };
-            _this.headersContentFromColumns = function () {
-                return ((0, jsx_runtime_1.jsx)(index_1.default, { data: _this.s.columnsToShow, events: _this.tt.draggableSortEvents, horizontal: true, keyExtractor: _this.tt.dragListkeyExtractor, onItemMoved: _this.tt.onItemMoved, onReordered: _this.tt.onReordered, renderItem: _this.tt.dragListRenderItemContent }));
-            };
-            _this.dragListCacheKeyExtractor = function (item) { return "".concat(item.tableSettingColumn.identifier(), "-").concat(_this.s.resizing); };
-            _this.dragListkeyExtractor = function (item) { return item.tableSettingColumn.identifier(); };
-            _this.onItemMoved = function (_b) {
-                var animationArgs = _b.animationArgs, itemIndex = _b.itemIndex, x = _b.x, y = _b.y;
-                var animatedPosition = (0, diggerize_1.digg)(_this, "s", "columnsToShow", itemIndex, "animatedPosition");
-                if (animationArgs) {
-                    react_native_1.Animated.timing(animatedPosition, animationArgs).start();
-                }
-                else {
-                    animatedPosition.setValue({ x: x, y: y });
-                }
-            };
-            _this.onReordered = function (_b) { return __awaiter(_this, [_b], void 0, function (_c) {
-                var TableSettingColumn, toColumn;
-                var fromItem = _c.fromItem, fromPosition = _c.fromPosition, toItem = _c.toItem, toPosition = _c.toPosition;
-                return __generator(this, function (_d) {
-                    switch (_d.label) {
-                        case 0:
-                            if (fromPosition == toPosition)
-                                return [2 /*return*/]; // Only do requests and queries if changed
-                            TableSettingColumn = fromItem.tableSettingColumn.constructor;
-                            return [4 /*yield*/, TableSettingColumn.find(toItem.tableSettingColumn.id())]; // Need to load latest position because ActsAsList might have changed it
-                        case 1:
-                            toColumn = _d.sent() // Need to load latest position because ActsAsList might have changed it
-                            ;
-                            return [4 /*yield*/, fromItem.tableSettingColumn.update({ position: toColumn.position() })];
-                        case 2:
-                            _d.sent();
-                            return [2 /*return*/];
-                    }
-                });
-            }); };
-            _this.dragListRenderItemContent = function (_b) {
-                var isActive = _b.isActive, item = _b.item, touchProps = _b.touchProps;
-                var animatedWidth = item.animatedWidth, animatedZIndex = item.animatedZIndex, column = item.column, tableSettingColumn = item.tableSettingColumn;
-                return ((0, jsx_runtime_1.jsx)(header_column_1.default, { active: isActive, animatedWidth: animatedWidth, animatedZIndex: animatedZIndex, column: column, resizing: _this.s.resizing, table: _this, tableSettingColumn: tableSettingColumn, touchProps: touchProps, widths: _this.s.widths }, tableSettingColumn.identifier()));
-            };
-            _this.onFilterFormSubmit = function () { return _this.submitFilter(); };
-            _this.onRequestCloseSettings = function () { return _this.setState({ showSettings: false }); };
-            _this.onSettingsClicked = function (e) {
-                e.preventDefault();
-                _this.setState({ showSettings: !_this.s.showSettings });
-            };
-            _this.submitFilter = function () {
-                var appHistory = _this.props.appHistory;
-                var queryQName = _this.s.queryQName;
-                var changeParamsParams = {};
-                var qParams = _this.s.filterForm.asObject();
-                if (react_native_1.Platform.OS == "web") {
-                    var filterForm = (0, diggerize_1.digg)(_this.tt.filterFormRef, "current");
-                    var navtiveFormParams = params_js_1.default.serializeForm(filterForm);
-                    (0, incorporator_1.incorporate)(qParams, navtiveFormParams);
-                }
-                changeParamsParams[queryQName] = JSON.stringify(qParams);
-                params_js_1.default.changeParams(changeParamsParams, { appHistory: appHistory });
-            };
-            _this.submitFilterDebounce = (0, debounce_1.default)(_this.tt.submitFilter);
-            return _this;
+                })()] }));
+    }
+    abilitiesToLoad() {
+        const abilitiesToLoad = {};
+        const { abilities, modelClass } = this.props;
+        const ownAbilities = [];
+        if (this.props.destroyEnabled)
+            ownAbilities.push("destroy");
+        if (this.props.editModelPath)
+            ownAbilities.push("edit");
+        if (this.props.viewModelPath)
+            ownAbilities.push("show");
+        if (ownAbilities.length > 0) {
+            const modelClassName = digg(modelClass.modelClassData(), "name");
+            abilitiesToLoad[modelClassName] = ownAbilities;
         }
-        ApiMakerTable.prototype.setup = function () {
-            var _this = this;
-            var _b, _c;
-            var t = (0, use_i18n_mjs_1.default)({ namespace: "js.api_maker.table" }).t;
-            var _d = (0, use_breakpoint_js_1.default)(), breakpoint = _d.name, mdUp = _d.mdUp;
-            var queryParams = (0, use_query_params_js_1.default)();
-            this.setInstance({
-                breakpoint: breakpoint,
-                filterFormRef: (0, react_1.useRef)(),
-                mdUp: mdUp,
-                t: t
-            });
-            var collectionKey = (0, diggerize_1.digg)(this.p.modelClass.modelClassData(), "collectionKey");
-            var queryName = this.props.queryName;
-            if (!queryName)
-                queryName = collectionKey;
-            var querySName = "".concat(queryName, "_s");
-            this.useStates({
-                columns: function () { return _this.columnsAsArray(); },
-                currentWorkplace: undefined,
-                currentWorkplaceCount: null,
-                filterForm: null,
-                columnsToShow: null,
-                draggedColumn: null,
-                identifier: function () { return _this.props.identifier || "".concat(collectionKey, "-default"); },
-                lastUpdate: function () { return new Date(); },
-                preload: undefined,
-                preparedColumns: undefined,
-                queryName: queryName,
-                queryQName: function () { return "".concat(queryName, "_q"); },
-                queryPageName: function () { return "".concat(queryName, "_page"); },
-                querySName: querySName,
-                resizing: false,
-                showFilters: function () { return Boolean(queryParams[querySName]); },
-                showSettings: false,
-                tableSetting: undefined,
-                tableSettingLoaded: false,
-                tableSettingFullCacheKey: undefined,
-                width: undefined,
-                widths: null
-            });
-            this.tableContextValue = (0, react_1.useMemo)(function () { return ({
-                cacheKey: _this.s.tableSettingFullCacheKey,
-                lastUpdate: _this.s.lastUpdate,
-                resizing: _this.s.resizing,
-                table: _this
-            }); }, [this.s.lastUpdate, this.s.resizing, this.s.tableSettingFullCacheKey]);
-            (0, react_1.useMemo)(function () {
-                if (_this.props.workplace) {
-                    _this.loadCurrentWorkplace().then(function () {
-                        _this.loadCurrentWorkplaceCount();
-                    });
+        if (abilities) {
+            for (const modelName in abilities) {
+                if (!(modelName in abilitiesToLoad)) {
+                    abilitiesToLoad[modelName] = [];
                 }
-            }, [(_b = this.p.currentUser) === null || _b === void 0 ? void 0 : _b.id()]);
-            (0, react_1.useMemo)(function () {
-                if (!_this.tt.tableSettings && _this.s.width) {
-                    _this.loadTableSetting();
+                for (const ability of abilities[modelName]) {
+                    abilitiesToLoad[modelName].push(ability);
                 }
-            }, [(_c = this.p.currentUser) === null || _c === void 0 ? void 0 : _c.id(), this.s.width]);
-            (0, use_model_event_js_1.default)(this.s.currentWorkplace, "workplace_links_created", this.tt.onLinksCreated);
-            (0, use_model_event_js_1.default)(this.s.currentWorkplace, "workplace_links_destroyed", this.tt.onLinksDestroyed);
-            var collectionReady = true;
-            var select;
-            if (!this.s.preparedColumns) {
-                collectionReady = false;
             }
-            if (collectionReady) {
-                select = (0, select_calculator_js_1.default)({ table: this });
+        }
+        return abilitiesToLoad;
+    }
+    cardOrTable() {
+        const { abilities, actionsContent, appHistory, card, className, collection, columns, controls, currentUser, defaultDateFormatName, defaultDateTimeFormatName, defaultParams, destroyEnabled, destroyMessage, editModelPath, filterCard, filterContent, filterSubmitButton, filterSubmitLabel, groupBy, header, identifier, modelClass, noRecordsAvailableContent, noRecordsFoundContent, onModelsLoaded, paginateContent, paginationComponent, preloads, queryMethod, queryName, select, selectColumns, styleUI, viewModelPath, workplace, ...restProps } = this.props;
+        const { models, qParams, query, result } = digs(this.collection, "models", "qParams", "query", "result");
+        let headerContent, PaginationComponent;
+        if (typeof header == "function") {
+            headerContent = header({ models, qParams, query, result });
+        }
+        else if (header) {
+            headerContent = header;
+        }
+        else {
+            headerContent = modelClass.modelName().human({ count: 2 });
+        }
+        if (!paginateContent) {
+            if (paginationComponent) {
+                PaginationComponent = paginationComponent;
             }
-            this.collection = (0, use_collection_js_1.default)({
-                abilities: this.abilitiesToLoad(),
-                defaultParams: this.props.defaultParams,
-                collection: this.props.collection,
-                groupBy: this.props.groupBy,
-                ifCondition: collectionReady,
-                modelClass: this.props.modelClass,
-                onModelsLoaded: this.props.onModelsLoaded,
-                noRecordsAvailableContent: this.props.noRecordsAvailableContent,
-                noRecordsFoundContent: this.props.noRecordsFoundContent,
-                pagination: true,
-                preloads: this.state.preload,
-                queryMethod: this.props.queryMethod,
-                queryName: queryName,
-                select: select,
-                selectColumns: this.props.selectColumns
-            });
-            this.queryWithoutPagination = (0, react_1.useMemo)(function () { var _b, _c, _d; return (_d = (_c = (_b = _this.collection) === null || _b === void 0 ? void 0 : _b.query) === null || _c === void 0 ? void 0 : _c.clone()) === null || _d === void 0 ? void 0 : _d.except("page"); }, [this.collection.query]);
-            (0, use_event_emitter_js_1.default)(this.tt.draggableSortEvents, "onDragStart", this.tt.onDragStart);
-            (0, use_event_emitter_js_1.default)(this.tt.draggableSortEvents, "onDragEndAnimation", this.tt.onDragEndAnimation);
-            (0, use_event_emitter_js_1.default)(this.tt.events, "columnVisibilityUpdated", this.tt.onColumnVisibilityUpdated);
-        };
-        ApiMakerTable.prototype.loadCurrentWorkplace = function () {
-            return __awaiter(this, void 0, void 0, function () {
-                var Workplace, result, currentWorkplace;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0:
-                            Workplace = (0, model_class_require_js_1.default)("Workplace");
-                            return [4 /*yield*/, Workplace.current()];
-                        case 1:
-                            result = _b.sent();
-                            currentWorkplace = (0, diggerize_1.digg)(result, "current", 0);
-                            this.setState({ currentWorkplace: currentWorkplace });
-                            return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        ApiMakerTable.prototype.loadCurrentWorkplaceCount = function () {
-            return __awaiter(this, void 0, void 0, function () {
-                var WorkplaceLink, currentWorkplaceCount;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0:
-                            WorkplaceLink = (0, model_class_require_js_1.default)("WorkplaceLink");
-                            return [4 /*yield*/, WorkplaceLink
-                                    .ransack({
-                                    resource_type_eq: this.p.modelClass.modelClassData().name,
-                                    workplace_id_eq: this.s.currentWorkplace.id()
-                                })
-                                    .count()];
-                        case 1:
-                            currentWorkplaceCount = _b.sent();
-                            this.setState({ currentWorkplaceCount: currentWorkplaceCount });
-                            return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        ApiMakerTable.prototype.getColumnsToShow = function (columns) {
-            return columns
-                .filter(function (_b) {
-                var column = _b.column, tableSettingColumn = _b.tableSettingColumn;
-                return (0, column_visible_js_1.default)(column, tableSettingColumn);
-            })
-                .sort(function (a, b) { return a.tableSettingColumn.position() - b.tableSettingColumn.position(); });
-        };
-        ApiMakerTable.prototype.loadTableSetting = function () {
-            return __awaiter(this, void 0, void 0, function () {
-                var tableSetting, _b, columns, preload, width, widths, columnsToShow;
-                return __generator(this, function (_c) {
-                    switch (_c.label) {
-                        case 0:
-                            this.tableSettings = new table_settings_js_1.default({ table: this });
-                            return [4 /*yield*/, this.tableSettings.loadExistingOrCreateTableSettings()];
-                        case 1:
-                            tableSetting = _c.sent();
-                            _b = this.tableSettings.preparedColumns(tableSetting), columns = _b.columns, preload = _b.preload;
-                            width = this.s.width;
-                            widths = new widths_js_1.default({ columns: columns, table: this, width: width });
-                            columnsToShow = this.getColumnsToShow(columns);
-                            this.setState({
-                                columns: columns,
-                                columnsToShow: columnsToShow,
-                                preparedColumns: columns,
-                                preload: this.mergedPreloads(preload),
-                                tableSetting: tableSetting,
-                                tableSettingLoaded: true,
-                                tableSettingFullCacheKey: tableSetting.fullCacheKey(),
-                                widths: widths
-                            });
-                            return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        ApiMakerTable.prototype.mergedPreloads = function (preload) {
-            var preloads = this.props.preloads;
-            var mergedPreloads = [];
-            if (preloads)
-                mergedPreloads = mergedPreloads.concat(preloads);
-            if (preload)
-                mergedPreloads = mergedPreloads.concat(preload);
-            return (0, uniqunize_1.default)(mergedPreloads);
-        };
-        ApiMakerTable.prototype.render = function () {
-            var _this = this;
-            var _b;
-            var _c = this.p, modelClass = _c.modelClass, noRecordsAvailableContent = _c.noRecordsAvailableContent, noRecordsFoundContent = _c.noRecordsFoundContent;
-            var _d = this.props, collection = _d.collection, currentUser = _d.currentUser;
-            var _e = this.s, queryName = _e.queryName, querySName = _e.querySName, showFilters = _e.showFilters;
-            var _f = (0, diggerize_1.digs)(this.collection, "models", "overallCount", "qParams", "query", "result", "showNoRecordsAvailableContent", "showNoRecordsFoundContent"), models = _f.models, overallCount = _f.overallCount, qParams = _f.qParams, query = _f.query, result = _f.result, showNoRecordsAvailableContent = _f.showNoRecordsAvailableContent, showNoRecordsFoundContent = _f.showNoRecordsFoundContent;
-            if (collection && collection.args.modelClass.modelClassData().name != modelClass.modelClassData().name) {
-                throw new Error("Model class from collection '".concat(collection.args.modelClass.modelClassData().name, "' ") +
-                    "didn't match model class on table: '".concat(modelClass.modelClassData().name, "'"));
+            else {
+                PaginationComponent = Paginate;
             }
-            return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { dataSet: this.cache("rootViewDataSet", { class: this.className() }, [this.className()]), onLayout: this.tt.onContainerLayout, style: (_b = this.props.styles) === null || _b === void 0 ? void 0 : _b.container, children: [showNoRecordsAvailableContent &&
-                        (0, jsx_runtime_1.jsx)("div", { className: "live-table--no-records-available-content", children: noRecordsAvailableContent({ models: models, qParams: qParams, overallCount: overallCount }) }), showNoRecordsFoundContent &&
-                        (0, jsx_runtime_1.jsx)("div", { className: "live-table--no-records-found-content", children: noRecordsFoundContent({ models: models, qParams: qParams, overallCount: overallCount }) }), showFilters &&
-                        (0, jsx_runtime_1.jsx)(index_2.default, { currentUser: currentUser, modelClass: modelClass, queryName: queryName, querySName: querySName }), (function () {
-                        if (qParams && query && result && models && !showNoRecordsAvailableContent && !showNoRecordsFoundContent) {
-                            return _this.cardOrTable();
-                        }
-                        else {
-                            return ((0, jsx_runtime_1.jsx)(react_native_1.View, { children: (0, jsx_runtime_1.jsx)(text_1.default, { children: _this.t(".loading_dot_dot_dit", { defaultValue: "Loading..." }) }) }));
-                        }
-                    })()] }));
+        }
+        const flatListStyle = {
+            overflowX: "auto"
         };
-        ApiMakerTable.prototype.abilitiesToLoad = function () {
-            var abilitiesToLoad = {};
-            var _b = this.props, abilities = _b.abilities, modelClass = _b.modelClass;
-            var ownAbilities = [];
-            if (this.props.destroyEnabled)
-                ownAbilities.push("destroy");
-            if (this.props.editModelPath)
-                ownAbilities.push("edit");
-            if (this.props.viewModelPath)
-                ownAbilities.push("show");
-            if (ownAbilities.length > 0) {
-                var modelClassName = (0, diggerize_1.digg)(modelClass.modelClassData(), "name");
-                abilitiesToLoad[modelClassName] = ownAbilities;
-            }
-            if (abilities) {
-                for (var modelName in abilities) {
-                    if (!(modelName in abilitiesToLoad)) {
-                        abilitiesToLoad[modelName] = [];
-                    }
-                    for (var _i = 0, _c = abilities[modelName]; _i < _c.length; _i++) {
-                        var ability = _c[_i];
-                        abilitiesToLoad[modelName].push(ability);
-                    }
-                }
-            }
-            return abilitiesToLoad;
+        if (styleUI) {
+            flatListStyle.border = "1px solid #dbdbdb";
+            flatListStyle.borderRadius = 5;
+        }
+        const flatList = (_jsx(TableContext.Provider, { value: this.tt.tableContextValue, children: _jsx(FlatList, { data: models, dataSet: {
+                    class: classNames("api-maker--table", className),
+                    cacheKey: this.s.tableSettingFullCacheKey,
+                    lastUpdate: this.s.lastUpdate
+                }, extraData: this.s.lastUpdate, keyExtractor: this.tt.keyExtrator, ListHeaderComponent: ListHeaderComponent, renderItem: this.tt.renderItem, showsHorizontalScrollIndicator: true, style: flatListStyle, ...restProps }) }));
+        return (_jsxs(_Fragment, { children: [filterContent && filterCard &&
+                    _jsx(Card, { className: "live-table--filter-card mb-4", children: this.filterForm() }), filterContent && !filterCard &&
+                    this.filterForm(), card &&
+                    _jsx(Card, { className: classNames("live-table--table-card", "mb-4", className), controls: this.tableControls(), header: headerContent, footer: this.tableFooter(), ...restProps, children: flatList }), !card && flatList, result && PaginationComponent &&
+                    _jsx(PaginationComponent, { result: result }), result && paginateContent &&
+                    paginateContent({ result })] }));
+    }
+    onContainerLayout = (e) => {
+        const { width } = e.nativeEvent.layout;
+        const { widths } = this.s;
+        this.setState({ width });
+        if (widths)
+            widths.tableWidth = width;
+    };
+    onLinksCreated = ({ args }) => {
+        const modelClassName = this.p.modelClass.modelClassData().name;
+        if (args.created[modelClassName]) {
+            const amountCreated = args.created[modelClassName].length;
+            this.setState((prevState) => ({
+                currentWorkplaceCount: prevState.currentWorkplaceCount + amountCreated
+            }));
+        }
+    };
+    onLinksDestroyed = ({ args }) => {
+        const modelClassName = this.p.modelClass.modelClassData().name;
+        if (args.destroyed[modelClassName]) {
+            const amountDestroyed = args.destroyed[modelClassName].length;
+            this.setState((prevState) => ({
+                currentWorkplaceCount: prevState.currentWorkplaceCount - amountDestroyed
+            }));
+        }
+    };
+    keyExtrator = (model) => `${this.s.tableSettingFullCacheKey}-${model.id()}`;
+    filterForm = () => {
+        const { filterFormRef, submitFilter, submitFilterDebounce } = this.tt;
+        const { filterContent, filterSubmitButton } = this.p;
+        const { queryQName } = this.s;
+        const { filterSubmitLabel } = this.props;
+        const { qParams } = digs(this.collection, "qParams");
+        return (_jsxs(Form, { className: "live-table--filter-form", formRef: filterFormRef, onSubmit: this.tt.onFilterFormSubmit, setForm: this.setStates.filterForm, children: ["s" in qParams &&
+                    _jsx("input", { name: "s", type: "hidden", value: qParams.s }), filterContent({
+                    onFilterChanged: submitFilter,
+                    onFilterChangedWithDelay: submitFilterDebounce,
+                    qParams,
+                    queryQName
+                }), filterSubmitButton &&
+                    _jsx("input", { className: "btn btn-primary live-table--submit-filter-button", type: "submit", style: { marginTop: "8px" }, value: filterSubmitLabel || this.t(".filter", { defaultValue: "Filter" }) })] }));
+    };
+    onFilterClicked = (e) => {
+        e.preventDefault();
+        this.setState({ showFilters: !this.state.showFilters });
+    };
+    onPerPageChanged = (e) => {
+        const { queryName } = this.s;
+        const newPerPageValue = digg(e, "target", "value");
+        const perKey = `${queryName}_per`;
+        const paramsChange = {};
+        paramsChange[perKey] = newPerPageValue;
+        Params.changeParams(paramsChange);
+    };
+    renderItem = ({ index, item: model }) => {
+        if (!this.s.tableSettingLoaded) {
+            return (_jsx(View, { children: _jsx(Text, { children: this.t(".loading_dot_dot_dot", { defaultValue: "Loading..." }) }) }));
+        }
+        return (_jsx(ModelRow, { cacheKey: model.cacheKey(), columns: this.s.columnsToShow, columnWidths: this.columnWidths(), events: this.tt.events, index: index, model: model, table: this, tableSettingFullCacheKey: this.s.tableSettingFullCacheKey }, model.id()));
+    };
+    styleForColumn = ({ column, columnIndex, even, style, type }) => {
+        const { styleUI } = this.p;
+        const defaultStyle = {
+            justifyContent: "center",
+            padding: 8,
+            overflow: "hidden"
         };
-        ApiMakerTable.prototype.cardOrTable = function () {
-            var _b = this.props, abilities = _b.abilities, actionsContent = _b.actionsContent, appHistory = _b.appHistory, card = _b.card, className = _b.className, collection = _b.collection, columns = _b.columns, controls = _b.controls, currentUser = _b.currentUser, defaultDateFormatName = _b.defaultDateFormatName, defaultDateTimeFormatName = _b.defaultDateTimeFormatName, defaultParams = _b.defaultParams, destroyEnabled = _b.destroyEnabled, destroyMessage = _b.destroyMessage, editModelPath = _b.editModelPath, filterCard = _b.filterCard, filterContent = _b.filterContent, filterSubmitButton = _b.filterSubmitButton, filterSubmitLabel = _b.filterSubmitLabel, groupBy = _b.groupBy, header = _b.header, identifier = _b.identifier, modelClass = _b.modelClass, noRecordsAvailableContent = _b.noRecordsAvailableContent, noRecordsFoundContent = _b.noRecordsFoundContent, onModelsLoaded = _b.onModelsLoaded, paginateContent = _b.paginateContent, paginationComponent = _b.paginationComponent, preloads = _b.preloads, queryMethod = _b.queryMethod, queryName = _b.queryName, select = _b.select, selectColumns = _b.selectColumns, styleUI = _b.styleUI, viewModelPath = _b.viewModelPath, workplace = _b.workplace, restProps = __rest(_b, ["abilities", "actionsContent", "appHistory", "card", "className", "collection", "columns", "controls", "currentUser", "defaultDateFormatName", "defaultDateTimeFormatName", "defaultParams", "destroyEnabled", "destroyMessage", "editModelPath", "filterCard", "filterContent", "filterSubmitButton", "filterSubmitLabel", "groupBy", "header", "identifier", "modelClass", "noRecordsAvailableContent", "noRecordsFoundContent", "onModelsLoaded", "paginateContent", "paginationComponent", "preloads", "queryMethod", "queryName", "select", "selectColumns", "styleUI", "viewModelPath", "workplace"]);
-            var _c = (0, diggerize_1.digs)(this.collection, "models", "qParams", "query", "result"), models = _c.models, qParams = _c.qParams, query = _c.query, result = _c.result;
-            var headerContent, PaginationComponent;
-            if (typeof header == "function") {
-                headerContent = header({ models: models, qParams: qParams, query: query, result: result });
-            }
-            else if (header) {
-                headerContent = header;
+        if (styleUI) {
+            Object.assign(defaultStyle, {
+                backgroundColor: even ? "#f5f5f5" : "#fff"
+            });
+        }
+        if (type == "actions") {
+            defaultStyle.flexDirection = "row";
+            defaultStyle.alignItems = "center";
+            if (this.tt.mdUp) {
+                defaultStyle.marginLeft = "auto";
             }
             else {
-                headerContent = modelClass.modelName().human({ count: 2 });
+                defaultStyle.marginRight = "auto";
             }
-            if (!paginateContent) {
-                if (paginationComponent) {
-                    PaginationComponent = paginationComponent;
-                }
-                else {
-                    PaginationComponent = paginate_1.default;
-                }
-            }
-            var flatListStyle = {
-                overflowX: "auto"
-            };
-            if (styleUI) {
-                flatListStyle.border = "1px solid #dbdbdb";
-                flatListStyle.borderRadius = 5;
-            }
-            var flatList = ((0, jsx_runtime_1.jsx)(TableContext.Provider, { value: this.tt.tableContextValue, children: (0, jsx_runtime_1.jsx)(flat_list_1.default, __assign({ data: models, dataSet: {
-                        class: (0, classnames_1.default)("api-maker--table", className),
-                        cacheKey: this.s.tableSettingFullCacheKey,
-                        lastUpdate: this.s.lastUpdate
-                    }, extraData: this.s.lastUpdate, keyExtractor: this.tt.keyExtrator, ListHeaderComponent: ListHeaderComponent, renderItem: this.tt.renderItem, showsHorizontalScrollIndicator: true, style: flatListStyle }, restProps)) }));
-            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [filterContent && filterCard &&
-                        (0, jsx_runtime_1.jsx)(card_1.default, { className: "live-table--filter-card mb-4", children: this.filterForm() }), filterContent && !filterCard &&
-                        this.filterForm(), card &&
-                        (0, jsx_runtime_1.jsx)(card_1.default, __assign({ className: (0, classnames_1.default)("live-table--table-card", "mb-4", className), controls: this.tableControls(), header: headerContent, footer: this.tableFooter() }, restProps, { children: flatList })), !card && flatList, result && PaginationComponent &&
-                        (0, jsx_runtime_1.jsx)(PaginationComponent, { result: result }), result && paginateContent &&
-                        paginateContent({ result: result })] }));
-        };
-        ApiMakerTable.prototype.styleForHeaderText = function () {
-            var actualStyle = { fontWeight: "bold" };
-            return actualStyle;
-        };
-        ApiMakerTable.prototype.tableControls = function () {
-            var controls = this.props.controls;
-            var showSettings = this.s.showSettings;
-            var _b = (0, diggerize_1.digs)(this.collection, "models", "qParams", "query", "result"), models = _b.models, qParams = _b.qParams, query = _b.query, result = _b.result;
-            return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: this.rootViewStyle || (this.rootViewStyle = { flexDirection: "row" }), children: [controls && controls({ models: models, qParams: qParams, query: query, result: result }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { dataSet: { class: "filter-button" }, onPress: this.tt.onFilterClicked, children: (0, jsx_runtime_1.jsx)(icon_1.default, { name: "search", size: 20 }) }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [showSettings &&
-                                (0, jsx_runtime_1.jsx)(index_3.default, { onRequestClose: this.tt.onRequestCloseSettings, table: this }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { dataSet: this.settingsButtonDataSet || (this.settingsButtonDataSet = { class: "settings-button" }), onPress: this.tt.onSettingsClicked, children: (0, jsx_runtime_1.jsx)(icon_1.default, { name: "gear", size: 20 }) })] })] }));
-        };
-        ApiMakerTable.prototype.tableFooter = function () {
-            var result = (0, diggerize_1.digs)(this.collection, "result").result;
-            var currentPage = result.currentPage();
-            var totalCount = result.totalCount();
-            var perPage = result.perPage();
-            var to = Math.min(currentPage * perPage, totalCount);
-            var defaultValue = "Showing %{from} to %{to} out of %{total_count} total.";
-            var from = ((currentPage - 1) * perPage) + 1;
-            if (to === 0)
-                from = 0;
-            return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: this.rootViewStyle || (this.rootViewStyle = { flexDirection: "row", justifyContent: "space-between", marginTop: 10 }), children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { dataSet: this.showingCountsDataSet || (this.showingCountsDataSet = { class: "showing-counts" }), style: this.showingCountsStyle || (this.showingCountsStyle = { flexDirection: "row" }), children: [(0, jsx_runtime_1.jsx)(text_1.default, { children: this.t(".showing_from_to_out_of_total", { defaultValue: defaultValue, from: from, to: to, total_count: totalCount }) }), this.p.workplace && this.s.currentWorkplaceCount !== null &&
-                                (0, jsx_runtime_1.jsx)(text_1.default, { style: this.xSelectedTextStyle || (this.xSelectedTextStyle = { marginLeft: 3 }), children: this.t(".x_selected", { defaultValue: "%{selected} selected.", selected: this.s.currentWorkplaceCount }) })] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { children: (0, jsx_runtime_1.jsx)(select_1.default, { className: "per-page-select", defaultValue: perPage, onChange: this.tt.onPerPageChanged, options: paginationOptions }) })] }));
-        };
-        ApiMakerTable.prototype.className = function () {
-            var classNames = ["api-maker--table"];
-            if (this.props.className) {
-                classNames.push(this.props.className);
-            }
-            return classNames.join(" ");
+        }
+        else if (this.tt.mdUp && styleUI) {
+            defaultStyle.borderRight = "1px solid #dbdbdb";
+        }
+        const actualStyle = Object.assign(defaultStyle, style);
+        return actualStyle;
+    };
+    styleForHeader = ({ column, columnIndex, style, type }) => {
+        const { mdUp } = this.tt;
+        const defaultStyle = {
+            flexDirection: "row",
+            alignItems: "center",
+            padding: 8
         };
-        ApiMakerTable.prototype.columnProps = function (column) {
-            var props = {};
-            if (column.textCenter) {
-                props.style || (props.style = {});
-                props.style.textAlign = "center";
-            }
-            if (column.textRight) {
-                props.style || (props.style = {});
-                props.style.textAlign = "right";
-            }
-            return props;
+        if (type != "actions" && mdUp && this.p.styleUI) {
+            defaultStyle.borderRight = "1px solid #dbdbdb";
+        }
+        const actualStyle = Object.assign(defaultStyle, style);
+        return actualStyle;
+    };
+    styleForHeaderText() {
+        const actualStyle = { fontWeight: "bold" };
+        return actualStyle;
+    }
+    styleForRow = ({ even } = {}) => {
+        const actualStyle = {
+            flex: 1,
+            alignItems: "stretch"
         };
-        ApiMakerTable.prototype.headerProps = function (column) {
-            var props = {};
-            if (column.textCenter) {
-                props.style || (props.style = {});
-                props.style.justifyContent = "center";
-            }
-            if (column.textRight) {
-                props.style || (props.style = {});
-                props.style.justifyContent = "end";
-            }
-            return props;
+        if (even && this.p.styleUI) {
+            actualStyle.backgroundColor = "#f5f5f5";
+        }
+        return actualStyle;
+    };
+    styleForRowHeader = () => {
+        const actualStyle = {
+            flex: 1,
+            alignItems: "stretch"
         };
-        ApiMakerTable.prototype.columnWidths = function () {
-            var columnWidths = {};
-            for (var _i = 0, _b = this.s.preparedColumns; _i < _b.length; _i++) {
-                var column = _b[_i];
-                columnWidths[column.tableSettingColumn.identifier()] = column.width;
+        return actualStyle;
+    };
+    tableControls() {
+        const { controls } = this.props;
+        const { showSettings } = this.s;
+        const { models, qParams, query, result } = digs(this.collection, "models", "qParams", "query", "result");
+        return (_jsxs(View, { style: this.rootViewStyle ||= { flexDirection: "row" }, children: [controls && controls({ models, qParams, query, result }), _jsx(Pressable, { dataSet: { class: "filter-button" }, onPress: this.tt.onFilterClicked, children: _jsx(Icon, { name: "search", size: 20 }) }), _jsxs(View, { children: [showSettings &&
+                            _jsx(Settings, { onRequestClose: this.tt.onRequestCloseSettings, table: this }), _jsx(Pressable, { dataSet: this.settingsButtonDataSet ||= { class: "settings-button" }, onPress: this.tt.onSettingsClicked, children: _jsx(Icon, { name: "gear", size: 20 }) })] })] }));
+    }
+    tableFooter() {
+        const { result } = digs(this.collection, "result");
+        const currentPage = result.currentPage();
+        const totalCount = result.totalCount();
+        const perPage = result.perPage();
+        const to = Math.min(currentPage * perPage, totalCount);
+        const defaultValue = "Showing %{from} to %{to} out of %{total_count} total.";
+        let from = ((currentPage - 1) * perPage) + 1;
+        if (to === 0)
+            from = 0;
+        return (_jsxs(View, { style: this.rootViewStyle ||= { flexDirection: "row", justifyContent: "space-between", marginTop: 10 }, children: [_jsxs(View, { dataSet: this.showingCountsDataSet ||= { class: "showing-counts" }, style: this.showingCountsStyle ||= { flexDirection: "row" }, children: [_jsx(Text, { children: this.t(".showing_from_to_out_of_total", { defaultValue, from, to, total_count: totalCount }) }), this.p.workplace && this.s.currentWorkplaceCount !== null &&
+                            _jsx(Text, { style: this.xSelectedTextStyle ||= { marginLeft: 3 }, children: this.t(".x_selected", { defaultValue: "%{selected} selected.", selected: this.s.currentWorkplaceCount }) })] }), _jsx(View, { children: _jsx(Select, { className: "per-page-select", defaultValue: perPage, onChange: this.tt.onPerPageChanged, options: paginationOptions }) })] }));
+    }
+    className() {
+        const classNames = ["api-maker--table"];
+        if (this.props.className) {
+            classNames.push(this.props.className);
+        }
+        return classNames.join(" ");
+    }
+    columnProps(column) {
+        const props = {};
+        if (column.textCenter) {
+            props.style ||= {};
+            props.style.textAlign = "center";
+        }
+        if (column.textRight) {
+            props.style ||= {};
+            props.style.textAlign = "right";
+        }
+        return props;
+    }
+    headerProps(column) {
+        const props = {};
+        if (column.textCenter) {
+            props.style ||= {};
+            props.style.justifyContent = "center";
+        }
+        if (column.textRight) {
+            props.style ||= {};
+            props.style.justifyContent = "end";
+        }
+        return props;
+    }
+    columnWidths() {
+        const columnWidths = {};
+        for (const column of this.s.preparedColumns) {
+            columnWidths[column.tableSettingColumn.identifier()] = column.width;
+        }
+        return columnWidths;
+    }
+    headersContentFromColumns = () => {
+        return (_jsx(DraggableSort, { data: this.s.columnsToShow, events: this.tt.draggableSortEvents, horizontal: true, keyExtractor: this.tt.dragListkeyExtractor, onItemMoved: this.tt.onItemMoved, onReordered: this.tt.onReordered, renderItem: this.tt.dragListRenderItemContent }));
+    };
+    dragListCacheKeyExtractor = (item) => `${item.tableSettingColumn.identifier()}-${this.s.resizing}`;
+    dragListkeyExtractor = (item) => item.tableSettingColumn.identifier();
+    onItemMoved = ({ animationArgs, itemIndex, x, y }) => {
+        const animatedPosition = digg(this, "s", "columnsToShow", itemIndex, "animatedPosition");
+        if (animationArgs) {
+            Animated.timing(animatedPosition, animationArgs).start();
+        }
+        else {
+            animatedPosition.setValue({ x, y });
+        }
+    };
+    onReordered = async ({ fromItem, fromPosition, toItem, toPosition }) => {
+        if (fromPosition == toPosition)
+            return; // Only do requests and queries if changed
+        const TableSettingColumn = fromItem.tableSettingColumn.constructor;
+        const toColumn = await TableSettingColumn.find(toItem.tableSettingColumn.id()); // Need to load latest position because ActsAsList might have changed it
+        await fromItem.tableSettingColumn.update({ position: toColumn.position() });
+    };
+    dragListRenderItemContent = ({ isActive, item, touchProps }) => {
+        const { animatedWidth, animatedZIndex, column, tableSettingColumn } = item;
+        return (_jsx(HeaderColumn, { active: isActive, animatedWidth: animatedWidth, animatedZIndex: animatedZIndex, column: column, resizing: this.s.resizing, table: this, tableSettingColumn: tableSettingColumn, touchProps: touchProps, widths: this.s.widths }, tableSettingColumn.identifier()));
+    };
+    headerClassNameForColumn(column) {
+        const classNames = [];
+        if (column.commonProps && column.commonProps.className)
+            classNames.push(column.commonProps.className);
+        if (column.headerProps && column.headerProps.className)
+            classNames.push(column.headerProps.className);
+        return classNames;
+    }
+    headerLabelForColumn(column) {
+        const { modelClass } = this.p;
+        if ("label" in column) {
+            if (typeof column.label == "function") {
+                return column.label();
             }
-            return columnWidths;
-        };
-        ApiMakerTable.prototype.headerClassNameForColumn = function (column) {
-            var classNames = [];
-            if (column.commonProps && column.commonProps.className)
-                classNames.push(column.commonProps.className);
-            if (column.headerProps && column.headerProps.className)
-                classNames.push(column.headerProps.className);
-            return classNames;
-        };
-        ApiMakerTable.prototype.headerLabelForColumn = function (column) {
-            var modelClass = this.p.modelClass;
-            if ("label" in column) {
-                if (typeof column.label == "function") {
-                    return column.label();
-                }
-                else {
-                    return column.label;
-                }
+            else {
+                return column.label;
             }
-            var currentModelClass = modelClass;
-            // Calculate current model class through path
-            if (column.path) {
-                var _loop_1 = function (pathPart) {
-                    var relationships = (0, diggerize_1.digg)(currentModelClass.modelClassData(), "relationships");
-                    var relationship = relationships.find(function (relationshipInArray) { return relationshipInArray.name == inflection.underscore(pathPart); });
-                    currentModelClass = (0, model_class_require_js_1.default)((0, diggerize_1.digg)(relationship, "resource_name"));
-                };
-                for (var _i = 0, _b = column.path; _i < _b.length; _i++) {
-                    var pathPart = _b[_i];
-                    _loop_1(pathPart);
-                }
+        }
+        let currentModelClass = modelClass;
+        // Calculate current model class through path
+        if (column.path) {
+            for (const pathPart of column.path) {
+                const relationships = digg(currentModelClass.modelClassData(), "relationships");
+                const relationship = relationships.find((relationshipInArray) => relationshipInArray.name == inflection.underscore(pathPart));
+                currentModelClass = modelClassRequire(digg(relationship, "resource_name"));
             }
-            if (column.attribute)
-                return currentModelClass.humanAttributeName(column.attribute);
-            throw new Error("No 'label' or 'attribute' was given");
-        };
-        return ApiMakerTable;
-    }(base_component_js_1.default)),
-    _a.defaultProps = {
-        card: true,
-        currentUser: null,
-        destroyEnabled: true,
-        filterCard: true,
-        filterSubmitButton: true,
-        noRecordsAvailableContent: undefined,
-        noRecordsFoundContent: undefined,
-        preloads: [],
-        select: {},
-        styleUI: true,
-        workplace: false
-    },
-    _a.propTypes = {
-        abilities: prop_types_1.default.object,
-        actionsContent: prop_types_1.default.func,
-        appHistory: prop_types_1.default.object,
-        card: prop_types_1.default.bool.isRequired,
-        className: prop_types_1.default.string,
-        collection: prop_types_1.default.instanceOf(collection_js_1.default),
-        columns: prop_types_1.default.oneOfType([prop_types_1.default.array, prop_types_1.default.func]),
-        controls: prop_types_1.default.func,
-        currentUser: prop_types_1.default.object,
-        defaultDateFormatName: prop_types_1.default.string,
-        defaultDateTimeFormatName: prop_types_1.default.string,
-        defaultParams: prop_types_1.default.object,
-        destroyEnabled: prop_types_1.default.bool.isRequired,
-        destroyMessage: prop_types_1.default.string,
-        editModelPath: prop_types_1.default.func,
-        filterCard: prop_types_1.default.bool.isRequired,
-        filterContent: prop_types_1.default.func,
-        filterSubmitLabel: prop_types_1.default.any,
-        groupBy: prop_types_1.default.array,
-        header: prop_types_1.default.oneOfType([prop_types_1.default.func, prop_types_1.default.string]),
-        identifier: prop_types_1.default.string,
-        modelClass: prop_types_1.default.func.isRequired,
-        noRecordsAvailableContent: prop_types_1.default.func,
-        noRecordsFoundContent: prop_types_1.default.func,
-        onModelsLoaded: prop_types_1.default.func,
-        paginateContent: prop_types_1.default.func,
-        paginationComponent: prop_types_1.default.func,
-        preloads: prop_types_1.default.array.isRequired,
-        queryMethod: prop_types_1.default.func,
-        queryName: prop_types_1.default.string,
-        select: prop_types_1.default.object,
-        selectColumns: prop_types_1.default.object,
-        styles: prop_types_1.default.object,
-        styleUI: prop_types_1.default.bool.isRequired,
-        viewModelPath: prop_types_1.default.func,
-        workplace: prop_types_1.default.bool.isRequired
-    },
-    _a)));
+        }
+        if (column.attribute)
+            return currentModelClass.humanAttributeName(column.attribute);
+        throw new Error("No 'label' or 'attribute' was given");
+    }
+    onFilterFormSubmit = () => this.submitFilter();
+    onRequestCloseSettings = () => this.setState({ showSettings: false });
+    onSettingsClicked = (e) => {
+        e.preventDefault();
+        this.setState({ showSettings: !this.s.showSettings });
+    };
+    submitFilter = () => {
+        const { appHistory } = this.props;
+        const { queryQName } = this.s;
+        const changeParamsParams = {};
+        const qParams = this.s.filterForm.asObject();
+        if (Platform.OS == "web") {
+            const filterForm = digg(this.tt.filterFormRef, "current");
+            const navtiveFormParams = Params.serializeForm(filterForm);
+            incorporate(qParams, navtiveFormParams);
+        }
+        changeParamsParams[queryQName] = JSON.stringify(qParams);
+        Params.changeParams(changeParamsParams, { appHistory });
+    };
+    submitFilterDebounce = debounce(this.tt.submitFilter);
+}));
 //# sourceMappingURL=table.js.map