@kaspernj/api-maker 1.0.380 → 1.0.382

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaspernj/api-maker",
-  "version": "1.0.380",
+  "version": "1.0.382",
   "type": "module",
   "description": "",
   "main": "index.js",

package/src/bootstrap/live-table/model-row.jsx

@@ -1,10 +1,9 @@
 import {digg, digs} from "diggerize"
 import * as inflection from "inflection"
+import Link from "../../link"
 import MoneyFormatter from "../../money-formatter"
 import PropTypes from "prop-types"
 
-import Link from "../../link"
-
 export default class ApiMakerBootStrapLiveTableModelRow extends React.PureComponent {
   static propTypes = {
     model: PropTypes.object.isRequired,

package/src/bootstrap/paginate.jsx

@@ -20,8 +20,14 @@ export default memo(shapeComponent(class ApiMakerBootstrapPaginate extends BaseC
   setup() {
     const {result} = this.p
 
-    this.totalPages = useMemo(() => Math.ceil(this.p.result.count() / this.p.result.perPage()), [result.currentPage(), result.totalCount(), result.totalPages()])
-    this.pages = useMemo(() => this.calculatePages(), [result.currentPage(), result.totalCount(), result.totalPages()])
+    this.totalPages = useMemo(
+      () => Math.ceil(this.p.result.count() / this.p.result.perPage()),
+      [result.currentPage(), result.totalCount(), result.totalPages()]
+    )
+    this.pages = useMemo(
+      () => this.calculatePages(),
+      [result.currentPage(), result.totalCount(), result.totalPages()]
+    )
   }
 
   calculatePages () {
@@ -131,7 +137,12 @@ export default memo(shapeComponent(class ApiMakerBootstrapPaginate extends BaseC
             </li>
           }
           {pages.map((page) =>
-            <li className={`page-item ${this.isPageActiveClass(page)}`} key={`page-${page}`}>
+            <li
+              className={`page-item ${this.isPageActiveClass(page)}`}
+              data-active={this.isPageActiveClass(page) == "active"}
+              data-page={page}
+              key={`page-${page}`}
+            >
               {this.isPageActiveClass(page) == "active" &&
                 page
               }

package/src/bootstrap/sort-link.jsx

@@ -1,9 +1,8 @@
 import BaseComponent from "../base-component"
-import {digg, digs} from "diggerize"
 import * as inflection from "inflection"
 import PropTypes from "prop-types"
 import qs from "qs"
-import {memo, useMemo} from "react"
+import {memo} from "react"
 import {shapeComponent} from "set-state-compare/src/shape-component.js"
 import urlEncode from "../url-encode.mjs"
 
@@ -31,12 +30,13 @@ export default memo(shapeComponent(class ApiMakerBootstrapSortLink extends BaseC
   href () {
     const qParams = this.qParams()
     const {queryParams, searchKey} = this.tt
+    const newQueryParams = {...queryParams}
 
     qParams.s = `${this.attribute()} ${this.sortMode()}` // eslint-disable-line id-length
 
-    queryParams[searchKey] = JSON.stringify(qParams)
+    newQueryParams[searchKey] = JSON.stringify(qParams)
 
-    const newParams = qs.stringify(queryParams, {encoder: urlEncode})
+    const newParams = qs.stringify(newQueryParams, {encoder: urlEncode})
     const newPath = `${location.pathname}?${newParams}`
 
     return newPath
@@ -56,17 +56,15 @@ export default memo(shapeComponent(class ApiMakerBootstrapSortLink extends BaseC
     const {attribute, className, defaultParams, linkComponent, onChanged, query, title, ...restProps} = this.props
 
     return (
-      <>
-        <LinkComponent
-          className={this.className()}
-          data-attribute={attribute}
-          data-sort-mode={this.sortMode()}
-          to={this.href()}
-          {...restProps}
-        >
-          {this.title()}
-        </LinkComponent>
-      </>
+      <LinkComponent
+        className={this.className()}
+        data-attribute={attribute}
+        data-sort-mode={this.sortMode()}
+        to={this.href()}
+        {...restProps}
+      >
+        {this.title()}
+      </LinkComponent>
     )
   }
 
@@ -78,16 +76,11 @@ export default memo(shapeComponent(class ApiMakerBootstrapSortLink extends BaseC
     return classNames.join(" ")
   }
 
-  linkComponent () {
-    if (this.props.linkComponent) return this.props.linkComponent
-
-    return Link
-  }
+  linkComponent = () => this.props.linkComponent || Link
 
   qParams() {
     const {defaultParams} = this.props
-    const {queryParams} = this.tt
-    const {searchKey} = digs(this, "searchKey")
+    const {queryParams, searchKey} = this.tt
 
     if (searchKey in queryParams) {
       return JSON.parse(queryParams[searchKey])
@@ -105,7 +98,7 @@ export default memo(shapeComponent(class ApiMakerBootstrapSortLink extends BaseC
   }
 
   title () {
-    const {attribute, query} = digs(this.props, "attribute", "query")
+    const {attribute, query} = this.p
     const {title} = this.props
 
     if (title) return title

package/src/table/filters/filter-form.jsx

@@ -1,4 +1,5 @@
 import AttributeElement from "./attribute-element"
+import BaseComponent from "../../base-component"
 import {digg, digs} from "diggerize"
 import * as inflection from "inflection"
 import Input from "../../inputs/input"
@@ -9,9 +10,9 @@ import ReflectionElement from "./reflection-element"
 import ScopeElement from "./scope-element"
 import Select from "../../inputs/select"
 import Services from "../../services.mjs"
-import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component"
+import {shapeComponent} from "set-state-compare/src/shape-component"
 
-export default memo(shapeComponent(class ApiMakerTableFiltersFilterForm extends ShapeComponent {
+export default memo(shapeComponent(class ApiMakerTableFiltersFilterForm extends BaseComponent {
   static propTypes = PropTypesExact({
     filter: PropTypes.object,
     modelClass: PropTypes.func.isRequired,
@@ -55,7 +56,7 @@ export default memo(shapeComponent(class ApiMakerTableFiltersFilterForm extends
   render() {
     const {valueInputRef} = digs(this, "valueInputRef")
     const currentModelClass = this.currentModelClass()
-    const {attribute, predicate, predicates, scope, value} = digs(this.state, "attribute", "predicate", "scope", "predicates", "value")
+    const {attribute, predicate, predicates, scope, value} = this.s
     let submitEnabled = false
 
     if (attribute && predicate) {
@@ -66,7 +67,7 @@ export default memo(shapeComponent(class ApiMakerTableFiltersFilterForm extends
 
     return (
       <div className="api-maker--table--filters--filter-form">
-        <form onSubmit={digg(this, "onSubmit")}>
+        <form onSubmit={this.tt.onSubmit}>
           <div>
             {this.currentPathParts().map(({translation}, pathPartIndex) =>
               <span key={`${pathPartIndex}-${translation}`}>
@@ -85,7 +86,7 @@ export default memo(shapeComponent(class ApiMakerTableFiltersFilterForm extends
                 <ReflectionElement
                   currentModelClass={currentModelClass}
                   key={reflection.name()}
-                  onClick={digg(this, "onReflectionClicked")}
+                  onClick={this.tt.onReflectionClicked}
                   reflection={reflection}
                 />
               )}
@@ -97,7 +98,7 @@ export default memo(shapeComponent(class ApiMakerTableFiltersFilterForm extends
                   attribute={attribute}
                   currentModelClass={currentModelClass}
                   key={attribute.name()}
-                  onClick={digg(this, "onAttributeClicked")}
+                  onClick={this.tt.onAttributeClicked}
                 />
               )}
               {currentModelClass.ransackableScopes().map((scope) =>
@@ -105,7 +106,7 @@ export default memo(shapeComponent(class ApiMakerTableFiltersFilterForm extends
                   active={scope.name() == this.state.scope?.name()}
                   key={scope.name()}
                   scope={scope}
-                  onScopeClicked={digg(this, "onScopeClicked")}
+                  onScopeClicked={this.tt.onScopeClicked}
                 />
               )}
             </div>
@@ -115,7 +116,7 @@ export default memo(shapeComponent(class ApiMakerTableFiltersFilterForm extends
                   className="predicate-select"
                   defaultValue={predicate?.name}
                   includeBlank
-                  onChange={digg(this, "onPredicateChanged")}
+                  onChange={this.tt.onPredicateChanged}
                   options={predicates.map((predicate) => digg(predicate, "name"))}
                 />
               }
@@ -136,14 +137,10 @@ export default memo(shapeComponent(class ApiMakerTableFiltersFilterForm extends
     )
   }
 
-  currentModelClass() {
-    const {path} = digs(this.state, "path")
-
-    return this.currentModelClassFromPath(path)
-  }
+  currentModelClass = () => this.currentModelClassFromPath(this.s.path)
 
   currentModelClassFromPath(path) {
-    const {modelClass} = digs(this.props, "modelClass")
+    const {modelClass} = this.p
     let currentModelClass = modelClass
 
     for (const pathPart of path) {
@@ -163,8 +160,8 @@ export default memo(shapeComponent(class ApiMakerTableFiltersFilterForm extends
   }
 
   currentPathParts() {
-    const {modelClass} = digs(this.props, "modelClass")
-    const {path} = digs(this.state, "path")
+    const {modelClass} = this.p
+    const {path} = this.s
     const result = []
     let currentModelClass = modelClass
 
@@ -225,11 +222,11 @@ export default memo(shapeComponent(class ApiMakerTableFiltersFilterForm extends
   onSubmit = (e) => {
     e.preventDefault()
 
-    const {filter, querySearchName} = digs(this.props, "filter", "querySearchName")
-    const {attribute, path, predicate, scope} = digs(this.state, "attribute", "path", "predicate", "scope")
+    const {filter, querySearchName} = this.p
+    const {attribute, path, predicate, scope} = this.s
     const {filterIndex} = digs(filter, "filterIndex")
     const searchParams = Params.parse()[querySearchName] || {}
-    const value = digg(this, "valueInputRef", "current", "value")
+    const value = digg(this.tt.valueInputRef, "current", "value")
     const newSearchParams = {
       p: path,
       v: value

package/src/table/filters/index.jsx

@@ -1,3 +1,4 @@
+import BaseComponent from "../../base-component"
 import {digg, digs} from "diggerize"
 import Filter from "./filter"
 import FilterForm from "./filter-form"
@@ -5,13 +6,13 @@ import LoadSearchModal from "./load-search-modal"
 import SaveSearchModal from "./save-search-modal"
 import PropTypes from "prop-types"
 import {memo} from "react"
-import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component.js"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
 import {TableSearch} from "../../models.mjs.erb"
 import useI18n from "i18n-on-steroids/src/use-i18n.mjs"
 import useQueryParams from "on-location-changed/src/use-query-params"
 import {View} from "react-native"
 
-export default memo(shapeComponent(class ApiMakerTableFilters extends ShapeComponent {
+export default memo(shapeComponent(class ApiMakerTableFilters extends BaseComponent {
   static propTypes = {
     currentUser: PropTypes.object,
     modelClass: PropTypes.func.isRequired,
@@ -38,7 +39,7 @@ export default memo(shapeComponent(class ApiMakerTableFilters extends ShapeCompo
     const currentFilters = this.currentFilters()
 
     return (
-      <View dataSet={{class: "api-maker--table--filters"}}>
+      <View dataSet={{class: "api-maker--table--filters"}} style={{alignItems: "flex-start"}}>
         {filter &&
           <FilterForm
             filter={filter}
@@ -74,21 +75,21 @@ export default memo(shapeComponent(class ApiMakerTableFilters extends ShapeCompo
             {...filterData}
           />
         )}
-        <div className="filter-actions">
-          <button className="add-new-filter-button" onClick={digg(this, "onAddFilterClicked")}>
+        <View className="filter-actions" style={{flexDirection: "row", marginTop: 10}}>
+          <button className="add-new-filter-button" onClick={this.tt.onAddFilterClicked}>
             {this.t(".add_new_filter", {defaultValue: "Add new filter"})}
           </button>
           {currentUser &&
             <>
-              <button className="save-search-button" onClick={digg(this, "onSaveSearchClicked")}>
+              <button className="save-search-button" onClick={this.tt.onSaveSearchClicked} style={{marginLeft: 10}}>
                 {this.t(".save_search", {defaultValue: "Save search"})}
               </button>
-              <button className="load-search-button" onClick={digg(this, "onLoadSearchClicked")}>
+              <button className="load-search-button" onClick={this.tt.onLoadSearchClicked} style={{marginLeft: 10}}>
                 {this.t(".load_search", {defaultValue: "Load search"})}
               </button>
             </>
           }
-        </div>
+        </View>
       </View>
     )
   }

package/src/table/header-column.jsx

@@ -13,6 +13,7 @@ import {useRef} from "react"
 export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseComponent {
   static propTypes = propTypesExact({
     column: PropTypes.object.isRequired,
+    fixedTableLayout: PropTypes.bool.isRequired,
     table: PropTypes.object.isRequired,
     tableSettingColumn: PropTypes.object.isRequired
   })
@@ -32,7 +33,7 @@ export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseC
   }
 
   render() {
-    const {column, table, tableSettingColumn} = this.p
+    const {column, fixedTableLayout, table, tableSettingColumn} = this.p
     const {width} = this.s
     const {defaultParams} = table.props
     const {query} = digs(table.collection, "query")
@@ -55,11 +56,13 @@ export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseC
               {table.headerLabelForColumn(column)}
             </Text>
           }
-          <Pressable onPressIn={this.tt.onResizePressIn} style={{marginLeft: "auto", cursor: "col-resize"}}>
-            <Text>
-              |
-            </Text>
-          </Pressable>
+          {fixedTableLayout &&
+            <Pressable onPressIn={this.tt.onResizePressIn} style={{marginLeft: "auto", cursor: "col-resize"}}>
+              <Text>
+                |
+              </Text>
+            </Pressable>
+          }
         </View>
       </ColumnInHeadComponent>
     )

package/src/table/model-row.jsx

@@ -7,22 +7,31 @@ import * as inflection from "inflection"
 import Link from "../link"
 import MoneyFormatter from "../money-formatter"
 import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
 import {memo} from "react"
 import {shapeComponent} from "set-state-compare/src/shape-component"
 
 const WorkerPluginsCheckbox = React.lazy(() => import("./worker-plugins-checkbox"))
 
 export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow extends BaseComponent {
-  static propTypes = {
+  static propTypes = propTypesExact({
     cacheKey: PropTypes.string.isRequired,
+    columnComponent: PropTypes.oneOfType([
+      PropTypes.func,
+      PropTypes.string
+    ]).isRequired,
     model: PropTypes.object.isRequired,
     liveTable: PropTypes.object.isRequired,
     preparedColumns: PropTypes.array,
+    rowComponent: PropTypes.oneOfType([
+      PropTypes.func,
+      PropTypes.string
+    ]).isRequired,
     tableSettingFullCacheKey: PropTypes.string.isRequired
-  }
+  })
 
   render() {
-    const {model} = this.p
+    const {columnComponent: ColumnComponent, model, rowComponent: RowComponent} = this.p
     const {modelClass, workplace} = this.p.liveTable.p
     const {actionsContent, columnsContent, destroyEnabled, editModelPath, viewModelPath} = this.p.liveTable.props
     const {columns, currentWorkplace} = this.p.liveTable.state
@@ -34,9 +43,6 @@ export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow exte
     if (editModelPath && model.can("edit")) editPath = editModelPath(this.modelCallbackArgs)
     if (viewModelPath && model.can("show")) viewPath = viewModelPath(this.modelCallbackArgs)
 
-    const RowComponent = this.props.rowComponent
-    const ColumnComponent = this.props.columnComponent
-
     return (
       <RowComponent className={`live-table-row ${inflection.dasherize(modelClass.modelClassData().paramKey)}-row`} data-model-id={model.id()}>
         {workplace &&

package/src/table/settings/column-row.jsx

@@ -0,0 +1,88 @@
+import BaseComponent from "../../base-component"
+import columnIdentifier from "../column-identifier.mjs"
+import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import {memo, useEffect, useRef} from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
+import {View} from "react-native"
+
+export default memo(shapeComponent(class ColumnRow extends BaseComponent {
+  static propTypes = propTypesExact({
+    column: PropTypes.object.isRequired,
+    table: PropTypes.object.isRequired,
+    tableSettingColumn: PropTypes.object.isRequired
+  })
+
+  setup() {
+    this.checked = this.p.tableSettingColumn.visible()
+    this.checkboxRef = useRef()
+
+    useEffect(() => {
+      this.updateCheckboxChecked()
+    }, [this.checked])
+  }
+
+  render() {
+    const {column, table, tableSettingColumn} = this.p
+    const checkboxProps = {}
+
+    if (tableSettingColumn.visible() === true) {
+      checkboxProps.checked = "checked"
+    } else if (tableSettingColumn.visible() === null) {
+      checkboxProps.indeterminate = "indeterminate"
+    }
+
+    return (
+      <View dataSet={{component: "api-maker--table--settings--column-row"}} style={{justifyContent: "center"}}>
+        <label style={{whiteSpace: "nowrap"}}>
+          <input
+            className="api-maker--table--setings--column-checkbox"
+            data-identifier={columnIdentifier(column)}
+            onChange={this.onCheckboxChange}
+            ref={this.checkboxRef}
+            type="checkbox"
+            {...checkboxProps}
+          />
+          {table.headerLabelForColumn(column)}
+        </label>
+      </View>
+    )
+  }
+
+  onCheckboxChange = () => {
+    const {checked} = this
+
+    if (checked === true) {
+      this.checked = null
+    } else if (checked === null) {
+      this.checked = false
+    } else {
+      this.checked = true
+    }
+
+    this.updateCheckboxChecked()
+    this.updateTableSettingColumn()
+  }
+
+  updateCheckboxChecked() {
+    const {checked} = this.tt
+
+    if (checked === true) {
+      this.checkboxRef.current.checked = true
+      this.checkboxRef.current.indeterminate = undefined
+    } else if (checked === null) {
+      this.checkboxRef.current.checked = undefined
+      this.checkboxRef.current.indeterminate = true
+    } else {
+      this.checkboxRef.current.checked = undefined
+      this.checkboxRef.current.indeterminate = undefined
+    }
+  }
+
+  async updateTableSettingColumn() {
+    const {table, tableSettingColumn} = this.p
+
+    await tableSettingColumn.update({visible: this.checked})
+    table.updateSettingsFullCacheKey()
+  }
+}))

package/src/table/settings/index.jsx

@@ -1,107 +1,53 @@
 import "./style"
+import BaseComponent from "../../base-component"
+import Checkbox from "../../utils/checkbox"
 import columnIdentifier from "../column-identifier.mjs"
-import EventListener from "../../event-listener.jsx"
+import ColumnRow from "./column-row"
+import {memo, useRef} from "react"
 import PropTypes from "prop-types"
-import React from "react"
-
-class ColumnRow extends React.PureComponent {
-  static propTypes = {
-    column: PropTypes.object.isRequired,
-    table: PropTypes.object.isRequired,
-    tableSettingColumn: PropTypes.object.isRequired
-  }
-
-  checked = this.props.tableSettingColumn.visible()
-  checkboxRef = React.createRef()
-
-  componentDidMount() {
-    this.updateCheckboxChecked()
-  }
-
-  componentDidUpdate() {
-    this.updateCheckboxChecked()
-  }
-
-  render() {
-    const {column, table, tableSettingColumn} = this.props
-    const checkboxProps = {}
-
-    if (tableSettingColumn.visible() === true) {
-      checkboxProps.checked = "checked"
-    } else if (tableSettingColumn.visible() === null) {
-      checkboxProps.indeterminate = "indeterminate"
-    }
-
-    return (
-      <div className="api-maker--table--settings--column-row">
-        <label style={{whiteSpace: "nowrap"}}>
-          <input
-            className="api-maker--table--setings--column-checkbox"
-            data-identifier={columnIdentifier(column)}
-            onChange={this.onCheckboxChange}
-            ref={this.checkboxRef}
-            type="checkbox"
-            {...checkboxProps}
-          />
-          {table.headerLabelForColumn(column)}
-        </label>
-      </div>
-    )
-  }
-
-  onCheckboxChange = () => {
-    const {checked} = this
-
-    if (checked === true) {
-      this.checked = null
-    } else if (checked === null) {
-      this.checked = false
-    } else {
-      this.checked = true
-    }
-
-    this.updateCheckboxChecked()
-    this.updateTableSettingColumn()
-  }
-
-  updateCheckboxChecked() {
-    const {checked} = this
-
-    if (checked === true) {
-      this.checkboxRef.current.checked = true
-      this.checkboxRef.current.indeterminate = undefined
-    } else if (checked === null) {
-      this.checkboxRef.current.checked = undefined
-      this.checkboxRef.current.indeterminate = true
-    } else {
-      this.checkboxRef.current.checked = undefined
-      this.checkboxRef.current.indeterminate = undefined
-    }
-  }
-
-  async updateTableSettingColumn() {
-    const {table, tableSettingColumn} = this.props
-
-    await tableSettingColumn.update({visible: this.checked})
-    table.updateSettingsFullCacheKey()
-  }
-}
-
-export default class ApiMakerTableSettings extends React.PureComponent {
-  static propTypes = {
+import propTypesExact from "prop-types-exact"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
+import useEventListener from "../../use-event-listener"
+import {Text, View} from "react-native"
+
+export default memo(shapeComponent(class ApiMakerTableSettings extends BaseComponent {
+  static propTypes = propTypesExact({
+    onFixedTableLayoutChanged: PropTypes.func.isRequired,
     onRequestClose: PropTypes.func.isRequired,
     table: PropTypes.object.isRequired
+  })
+
+  setup() {
+    this.rootRef = useRef()
+
+    useEventListener(window, "mouseup", this.tt.onWindowMouseUp)
+    this.useStates({
+      fixedTableLayout: this.tableSetting().fixedTableLayout()
+    })
   }
 
-  rootRef = React.createRef()
+  tableSetting = () => this.p.table.s.tableSetting
 
   render() {
-    const {table} = this.props
-    const {preparedColumns} = table.state
+    const {table} = this.p
+    const {fixedTableLayout} = this.s
+    const {preparedColumns} = table.s
 
     return (
-      <div className="api-maker--table--settings" ref={this.rootRef}>
-        <EventListener event="mouseup" onCalled={this.onWindowMouseUp} target={window} />
+      <div className="api-maker--table--settings" ref={this.tt.rootRef}>
+        <View style={{marginBottom: 5}}>
+          <Text style={{fontSize: 16, fontWeight: "bold"}}>
+            Settings
+          </Text>
+        </View>
+        <View>
+          <Checkbox checked={fixedTableLayout} label="Fixed table" onValueChange={this.tt.onFixedTableChecked} />
+        </View>
+        <View style={{marginBottom: 5}}>
+          <Text style={{fontSize: 16, fontWeight: "bold"}}>
+            Columns
+          </Text>
+        </View>
         {preparedColumns?.map(({column, tableSettingColumn}) =>
           <ColumnRow column={column} key={columnIdentifier(column)} table={table} tableSettingColumn={tableSettingColumn} />
         )}
@@ -109,9 +55,15 @@ export default class ApiMakerTableSettings extends React.PureComponent {
     )
   }
 
+  onFixedTableChecked = async (checked) => {
+    await this.tableSetting().update({fixedTableLayout: true})
+    this.setState({fixedTableLayout: checked})
+    this.p.onFixedTableLayoutChanged(checked)
+  }
+
   onWindowMouseUp = (e) => {
-    if (this.rootRef.current && !this.rootRef.current.contains(e.target)) {
-      this.props.onRequestClose()
+    if (this.tt.rootRef.current && !this.tt.rootRef.current.contains(e.target)) {
+      this.p.onRequestClose()
     }
   }
-}
+}))

package/src/table/style.scss

@@ -1,8 +1,10 @@
 @import "./variables";
 
 .api-maker--table {
-  table {
-    table-layout: fixed;
+  &[data-fixed-table-layout="true"] {
+    table {
+      table-layout: fixed;
+    }
   }
 
   .live-table-header {

package/src/table/table.jsx

@@ -99,6 +99,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     this.useStates({
       columns: columnsAsArray,
       currentWorkplace: undefined,
+      fixedTableLayout: undefined,
       identifier: () => this.props.identifier || `${collectionKey}-default`,
       preload: undefined,
       preparedColumns: undefined,
@@ -163,6 +164,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     const {columns, preload} = this.tableSettings.preparedColumns(tableSetting)
 
     this.setState({
+      fixedTableLayout: tableSetting.fixedTableLayout(),
       preparedColumns: columns,
       preload: this.mergedPreloads(preload),
       tableSetting,
@@ -219,7 +221,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     }
 
     return (
-      <div className={this.className()}>
+      <div className={this.className()} data-fixed-table-layout={this.s.fixedTableLayout}>
         {showNoRecordsAvailableContent &&
           <div className="live-table--no-records-available-content">
             {noRecordsAvailableContent({models, qParams, overallCount})}
@@ -395,6 +397,10 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     this.setState({showFilters: !this.state.showFilters})
   }
 
+  onFixedTableLayoutChanged = (fixedTableLayout) => {
+    this.setState({fixedTableLayout})
+  }
+
   onPerPageChanged = (e) => {
     const {queryName} = this.s
     const newPerPageValue = digg(e, "target", "value")
@@ -419,7 +425,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
         </a>
         <span style={{position: "relative"}}>
           {showSettings &&
-            <Settings onRequestClose={this.tt.onRequestCloseSettings} table={this} />
+            <Settings onFixedTableLayoutChanged={this.tt.onFixedTableLayoutChanged} onRequestClose={this.tt.onRequestCloseSettings} table={this} />
           }
           <a className="settings-button" href="#" onClick={this.tt.onSettingsClicked}>
             <i className="fa fa-fw fa-gear la la-fw la-gear" />
@@ -431,7 +437,6 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
 
   tableContent () {
     const {workplace} = this.p
-    const {breakpoint} = this.tt
     const {currentWorkplace, preparedColumns, tableSettingFullCacheKey} = this.s
     const {models, query} = digs(this.collection, "models", "query")
     const ColumnInHeadComponent = this.columnInHeadComponent()
@@ -463,7 +468,6 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
         <BodyComponent>
           {models.map((model) =>
             <ModelRow
-              breakPoint={breakpoint}
               cacheKey={model.cacheKey()}
               columnComponent={this.columnComponent()}
               key={model.id()}
@@ -537,7 +541,13 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
   rowComponent = () => this.responsiveComponent("tr")
 
   headersContentFromColumns = () => this.s.preparedColumns?.map(({column, tableSettingColumn}) => columnVisible(column, tableSettingColumn) &&
-    <HeaderColumn column={column} key={tableSettingColumn.identifier()} table={this} tableSettingColumn={tableSettingColumn} />
+    <HeaderColumn
+      column={column}
+      fixedTableLayout={this.s.fixedTableLayout}
+      key={tableSettingColumn.identifier()}
+      table={this}
+      tableSettingColumn={tableSettingColumn}
+    />
   )
 
   headerClassNameForColumn (column) {

package/src/utils/checkbox.jsx

@@ -0,0 +1,33 @@
+import BaseComponent from "../base-component"
+import {CheckBox, Text, View} from "react-native"
+import {memo} from "react"
+import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
+
+export default memo(shapeComponent(class ApiMakerUtilsCheckbox extends BaseComponent {
+  static defaultProps = {
+    label: undefined
+  }
+
+  static propTypes = propTypesExact({
+    checked: PropTypes.bool.isRequired,
+    label: PropTypes.string,
+    onValueChange: PropTypes.func.isRequired
+  })
+
+  render() {
+    const {checked, label, onValueChange} = this.p
+
+    return (
+      <View dataSet={{component: "api-maker--utils--checkbox"}} style={{flexDirection: "row", alignItems: "center"}}>
+        <CheckBox onValueChange={onValueChange} value={checked} />
+        {label &&
+          <Text style={{marginLeft: 3}}>
+            {label}
+          </Text>
+        }
+      </View>
+    )
+  }
+}))