@kaspernj/api-maker 1.0.379 → 1.0.381

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaspernj/api-maker",
-  "version": "1.0.379",
+  "version": "1.0.381",
   "type": "module",
   "description": "",
   "main": "index.js",
@@ -32,7 +32,7 @@
     "js-money": ">= 0.6.3",
     "numberable": ">= 1.0.0",
     "object-to-formdata": ">= 4.1.0",
-    "on-location-changed": ">= 1.0.10",
+    "on-location-changed": ">= 1.0.13",
     "qs": ">= 6.9.3",
     "replaceall": ">= 0.1.6",
     "set-state-compare": "^1.0.45",

package/src/bootstrap/attribute-rows.jsx

@@ -1,10 +1,11 @@
 import AttributeRow from "./attribute-row"
-import {digs} from "diggerize"
+import BaseComponent from "../base-component"
+import {memo} from "react"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
-import React from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
 
-export default class ApiMakerBootstrapAttributeRows extends React.PureComponent {
+export default memo(shapeComponent(class ApiMakerBootstrapAttributeRows extends BaseComponent {
   static defaultProps = {
     checkIfAttributeLoaded: false
   }
@@ -15,13 +16,13 @@ export default class ApiMakerBootstrapAttributeRows extends React.PureComponent
     model: PropTypes.object.isRequired
   })
 
-  classObject = this.props.model.modelClass()
+  classObject = this.p.model.modelClass()
 
   render () {
-    const {attributes, checkIfAttributeLoaded, model} = digs(this.props, "attributes", "checkIfAttributeLoaded", "model")
+    const {attributes, checkIfAttributeLoaded, model} = this.p
 
     return attributes.map((attribute) =>
       <AttributeRow attribute={attribute} checkIfAttributeLoaded={checkIfAttributeLoaded} key={`attribute-${attribute}`} model={model} />
     )
   }
-}
+}))

package/src/bootstrap/card.jsx

@@ -1,9 +1,11 @@
+import BaseComponent from "../base-component"
 import classNames from "classnames"
 import {digg, digs} from "diggerize"
 import PropTypes from "prop-types"
-import React from "react"
+import {memo, useRef} from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
 
-export default class ApiMakerBootstrapCard extends React.PureComponent {
+export default memo(shapeComponent(class ApiMakerBootstrapCard extends BaseComponent {
   static defaultProps = {
     defaultExpanded: true,
     expandable: false,
@@ -27,13 +29,12 @@ export default class ApiMakerBootstrapCard extends React.PureComponent {
     table: PropTypes.bool.isRequired
   }
 
-  cardRef = React.createRef()
+  setup() {
+    this.cardRef = useRef()
 
-  constructor (props) {
-    super(props)
-    this.state = {
-      expanded: props.defaultExpanded
-    }
+    this.useStates({
+      expanded: this.props.defaultExpanded
+    })
   }
 
   render () {
@@ -144,4 +145,4 @@ export default class ApiMakerBootstrapCard extends React.PureComponent {
 
     return classNames.join(" ")
   }
-}
+}))

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/live-table.jsx

@@ -1,3 +1,4 @@
+import BaseComponent from "../base-component"
 import Card from "./card"
 import classNames from "classnames"
 import Collection from "../collection"
@@ -10,10 +11,10 @@ import Paginate from "./paginate"
 import Params from "../params"
 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 SortLink from "./sort-link"
 
-export default memo(shapeComponent(class ApiMakerBootstrapLiveTable extends ShapeComponent {
+export default memo(shapeComponent(class ApiMakerBootstrapLiveTable extends BaseComponent {
   static defaultProps = {
     card: true,
     destroyEnabled: true,

package/src/bootstrap/paginate.jsx

@@ -1,14 +1,15 @@
+import BaseComponent from "../base-component"
 import instanceOfClassName from "../instance-of-class-name"
 import Link from "../link"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
 import qs from "qs"
-import {memo} from "react"
+import {memo, useMemo} from "react"
 import Result from "../result"
-import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component.js"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
 import urlEncode from "../url-encode.mjs"
 
-export default memo(shapeComponent(class ApiMakerBootstrapPaginate extends ShapeComponent {
+export default memo(shapeComponent(class ApiMakerBootstrapPaginate extends BaseComponent {
   static propTypes = propTypesExact({
     result: PropTypes.oneOfType([
       instanceOfClassName("ApiMakerResult"),
@@ -17,34 +18,34 @@ export default memo(shapeComponent(class ApiMakerBootstrapPaginate extends Shape
   })
 
   setup() {
-    this.useStates({
-      pages: () => this.pages()
-    })
-  }
+    const {result} = this.p
 
-  componentDidUpdate (prevProps) {
-    if (prevProps.result != this.props.result) {
-      this.setState({pages: this.pages()})
-    }
-  }
-
-  isPageActiveClass (pageNumber) {
-    if (this.props.result.currentPage() == pageNumber)
-      return "active"
+    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()]
+    )
   }
 
-  pages () {
-    const currentPage = this.props.result.currentPage()
+  calculatePages () {
+    const {result} = this.p
+    const {totalPages} = this.tt
+    const currentPage = result.currentPage()
     const pages = []
-    const totalPages = this.props.result.totalPages()
+
     let pagesFrom = currentPage - 5
     let pagesTo = currentPage + 5
 
-    if (pagesFrom < 1)
+    if (pagesFrom < 1) {
       pagesFrom = 1
+    }
 
-    if (pagesTo > totalPages)
+    if (pagesTo > totalPages) {
       pagesTo = totalPages
+    }
 
     for (let i = pagesFrom; i <= pagesTo; i++) {
       pages.push(i)
@@ -53,8 +54,10 @@ export default memo(shapeComponent(class ApiMakerBootstrapPaginate extends Shape
     return pages
   }
 
+  isPageActiveClass = (pageNumber) => this.p.result.currentPage() == pageNumber ? "active" : "not-active"
+
   pagePath (pageNumber) {
-    let pageKey = this.props.result.data.collection.queryArgs.pageKey
+    let pageKey = this.p.result.data.collection.queryArgs.pageKey
 
     if (!pageKey) {
       pageKey = "page"
@@ -69,87 +72,111 @@ export default memo(shapeComponent(class ApiMakerBootstrapPaginate extends Shape
   }
 
   previousPagePath () {
+    const {result} = this.p
     let previousPage
 
-    if (this.props.result.currentPage() > 1) {
-      previousPage = this.props.result.currentPage() - 1
+    if (result.currentPage() > 1) {
+      previousPage = result.currentPage() - 1
     } else {
-      previousPage = this.props.result.currentPage()
+      previousPage = result.currentPage()
     }
 
     return this.pagePath(previousPage)
   }
 
   nextPagePath () {
+    const {result} = this.p
     let nextPage
 
-    if (this.props.result.currentPage() < this.props.result.totalPages()) {
-      nextPage = this.props.result.currentPage() + 1
+    if (result.currentPage() < this.tt.totalPages) {
+      nextPage = result.currentPage() + 1
     } else {
-      nextPage = this.props.result.currentPage()
+      nextPage = result.currentPage()
     }
 
     return this.pagePath(nextPage)
   }
 
-  showBackwardsDots () {
-    const currentPage = this.props.result.currentPage()
-    return (currentPage - 5 > 1)
-  }
-
-  showForwardsDots () {
-    const currentPage = this.props.result.currentPage()
-    const totalPages = this.props.result.totalPages()
-    return (currentPage + 5 < totalPages)
-  }
+  showBackwardsDots = () => (this.p.result.currentPage() - 5 > 1)
+  showForwardsDots = () => (this.p.result.currentPage() + 5 < this.tt.totalPages)
 
   render () {
-    const {result} = this.props
-    const {pages} = this.state
+    const {result} = this.p
+    const {pages, totalPages} = this.tt
+    const showNextPage = result.currentPage() < totalPages
+    const showLastPage = result.currentPage() < totalPages
+    const showPreviousPage = result.currentPage() > 1
+    const showFirstPage = result.currentPage() > 1
 
     return (
       <>
         <ul className="pagination" data-pages-length={pages.length}>
-          <li className={`page-item ${result.currentPage() <= 1 ? "disabled" : ""}`} key="page-first">
-            <Link className="page-link" to={this.pagePath(1)}>
-              ⇤
-            </Link>
+          <li className={`page-item ${!showPreviousPage ? "disabled" : ""}`} key="page-first">
+            {!showPreviousPage &&
+              "⇤"
+            }
+            {showPreviousPage &&
+              <Link className="page-link" to={this.pagePath(1)}>
+                ⇤
+              </Link>
+            }
           </li>
-          <li className={`page-item ${result.currentPage() <= 1 ? "disabled" : ""}`} key="page-previous">
-            <Link className="page-link" to={this.previousPagePath()}>
-              ←
-            </Link>
+          <li className={`page-item ${!showFirstPage ? "disabled" : ""}`} key="page-previous">
+            {!showFirstPage &&
+              "←"
+            }
+            {showFirstPage &&
+              <Link className="page-link" to={this.previousPagePath()}>
+                ←
+              </Link>
+            }
           </li>
           {this.showBackwardsDots() &&
-            <li className="page-item">
-              <a className="page-link disabled" href="#">
-                &hellip;
-              </a>
+            <li className="page-item disabled">
+              &hellip;
             </li>
           }
           {pages.map((page) =>
-            <li className={`page-item ${this.isPageActiveClass(page)}`} key={`page-${page}`}>
-              <Link className="page-link" to={this.pagePath(page)}>
-                {page}
-              </Link>
+            <li
+              className={`page-item ${this.isPageActiveClass(page)}`}
+              data-active={this.isPageActiveClass(page) == "active"}
+              data-page={page}
+              key={`page-${page}`}
+            >
+              {this.isPageActiveClass(page) == "active" &&
+                page
+              }
+              {this.isPageActiveClass(page) == "not-active" &&
+                <Link className="page-link" to={this.pagePath(page)}>
+                  {page}
+                </Link>
+              }
             </li>
           )}
           {this.showForwardsDots() &&
-            <li className="page-item">
-              <a className="page-link disabled" href="#">
-                &hellip;
-              </a>
+            <li className="page-item disabled">
+              &hellip;
             </li>
           }
-          <li className={`page-item ${result.currentPage() >= result.totalPages() ? "disabled" : ""}`} key="page-next">
-            <Link className="page-link" to={this.nextPagePath()}>
-              →
-            </Link>
+          <li className={`page-item ${!showNextPage ? "disabled" : ""}`} key="page-next">
+            {!showNextPage &&
+              "→"
+            }
+            {showNextPage &&
+              <Link className="page-link" to={this.nextPagePath()}>
+                →
+              </Link>
+            }
           </li>
-          <li className={`page-item ${result.currentPage() >= result.totalPages() ? "disabled" : ""}`} key="page-last">
-            <Link className="page-link" to={this.pagePath(result.totalPages())}>
-              ⇥
-            </Link>
+          <li className={`page-item ${!showLastPage ? "disabled" : ""}`} key="page-last">
+            {!showLastPage &&
+              "⇥"
+            }
+            {showLastPage &&
+              <Link className="page-link" to={this.pagePath(totalPages)}>
+                ⇥
+              </Link>
+            }
           </li>
         </ul>
       </>

package/src/bootstrap/sort-link.jsx

@@ -1,15 +1,15 @@
-import {digg, digs} from "diggerize"
+import BaseComponent from "../base-component"
 import * as inflection from "inflection"
 import PropTypes from "prop-types"
 import qs from "qs"
-import React from "react"
+import {memo} from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
 import urlEncode from "../url-encode.mjs"
 
 import Link from "../link"
-import PureComponent from "set-state-compare/src/pure-component"
-import withQueryParams from "on-location-changed/src/with-query-params"
+import useQueryParams from "on-location-changed/src/use-query-params"
 
-class ApiMakerBootstrapSortLink extends PureComponent {
+export default memo(shapeComponent(class ApiMakerBootstrapSortLink extends BaseComponent {
   static propTypes = {
     attribute: PropTypes.string.isRequired,
     className: PropTypes.string,
@@ -17,26 +17,26 @@ class ApiMakerBootstrapSortLink extends PureComponent {
     linkComponent: PropTypes.object,
     onChanged: PropTypes.func,
     query: PropTypes.object.isRequired,
-    queryParams: PropTypes.object.isRequired,
     title: PropTypes.node
   }
 
-  searchKey = digg(this, "props", "query", "queryArgs").searchKey || "q"
-
-  attribute () {
-    return inflection.underscore(this.props.attribute)
+  setup() {
+    this.queryParams = useQueryParams()
+    this.searchKey = this.p.query.queryArgs.searchKey || "q"
   }
 
+  attribute = () => inflection.underscore(this.p.attribute)
+
   href () {
     const qParams = this.qParams()
-    const {queryParams} = digs(this.props, "queryParams")
-    const {searchKey} = digs(this, "searchKey")
+    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
@@ -53,20 +53,18 @@ class ApiMakerBootstrapSortLink extends PureComponent {
 
   render () {
     const LinkComponent = this.linkComponent()
-    const {attribute, className, defaultParams, linkComponent, onChanged, query, queryParams, title, ...restProps} = this.props
+    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 @@ class ApiMakerBootstrapSortLink extends PureComponent {
     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} = digs(this.props, "queryParams")
-    const {searchKey} = digs(this, "searchKey")
+    const {queryParams, searchKey} = this.tt
 
     if (searchKey in queryParams) {
       return JSON.parse(queryParams[searchKey])
@@ -105,13 +98,11 @@ class ApiMakerBootstrapSortLink extends PureComponent {
   }
 
   title () {
-    const {attribute, query} = digs(this.props, "attribute", "query")
+    const {attribute, query} = this.p
     const {title} = this.props
 
     if (title) return title
 
     return query.modelClass().humanAttributeName(attribute)
   }
-}
-
-export default withQueryParams(ApiMakerBootstrapSortLink)
+}))

package/src/link.jsx

@@ -1,6 +1,6 @@
-import React from "react"
+import {PureComponent} from "react"
 
-export default class Link extends React.PureComponent {
+export default class Link extends PureComponent {
   render() {
     const {to, onClick, ...restProps} = this.props
 

package/src/result.mjs

@@ -3,27 +3,11 @@ export default class ApiMakerResult {
     this.data = data
   }
 
-  currentPage () {
-    return this.data.response.meta.currentPage
-  }
-
-  models () {
-    return this.data.models
-  }
-
-  modelClass () {
-    return this.data.collection.modelClass()
-  }
-
-  perPage () {
-    return this.data.response.meta.perPage
-  }
-
-  totalCount () {
-    return this.data.response.meta.totalCount
-  }
-
-  totalPages () {
-    return this.data.response.meta.totalPages
-  }
+  count = () => this.data.response.meta.count
+  currentPage = () => this.data.response.meta.currentPage
+  models = () => this.data.models
+  modelClass = () => this.data.collection.modelClass()
+  perPage = () => this.data.response.meta.perPage
+  totalCount = () => this.data.response.meta.totalCount
+  totalPages = () => this.data.response.meta.totalPages
 }

package/src/super-admin/show-reflection-link.jsx

@@ -1,5 +1,7 @@
 import BaseComponent from "../base-component"
 import {digg} from "diggerize"
+import Link from "../link"
+import {memo} from "react"
 import {shapeComponent} from "set-state-compare/src/shape-component.js"
 import {useMemo} from "react"
 

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

@@ -0,0 +1,107 @@
+import BaseComponent from "../base-component"
+import classNames from "classnames"
+import {digs} from "diggerize"
+import {memo} from "react"
+import {Pressable, Text, View} from "react-native"
+import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+import SortLink from "../bootstrap/sort-link"
+import useEventListener from "../use-event-listener.mjs"
+import {useRef} from "react"
+
+export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseComponent {
+  static propTypes = propTypesExact({
+    column: PropTypes.object.isRequired,
+    table: PropTypes.object.isRequired,
+    tableSettingColumn: PropTypes.object.isRequired
+  })
+
+  setup() {
+    this.columnRef = useRef()
+
+    useEventListener(window, "mousemove", this.tt.onWindowMouseMove)
+    useEventListener(window, "mouseup", this.tt.onWindowMouseUp)
+
+    this.useStates({
+      cursorX: undefined,
+      originalWidth: undefined,
+      resizing: false,
+      width: this.p.tableSettingColumn.width()
+    })
+  }
+
+  render() {
+    const {column, table, tableSettingColumn} = this.p
+    const {width} = this.s
+    const {defaultParams} = table.props
+    const {query} = digs(table.collection, "query")
+    const ColumnInHeadComponent = table.columnInHeadComponent()
+
+    return (
+      <ColumnInHeadComponent
+        className={classNames(...table.headerClassNameForColumn(column))}
+        data-identifier={tableSettingColumn.identifier()}
+        ref={this.tt.columnRef}
+        style={{width}}
+        {...table.columnProps(column)}
+      >
+        <View style={{display: "flex", flexDirection: "row", alignItems: "center"}}>
+          {tableSettingColumn.hasSortKey() && query &&
+            <SortLink attribute={tableSettingColumn.sortKey()} defaultParams={defaultParams} query={query} title={table.headerLabelForColumn(column)} />
+          }
+          {(!tableSettingColumn.hasSortKey() || !query) &&
+            <Text>
+              {table.headerLabelForColumn(column)}
+            </Text>
+          }
+          <Pressable onPressIn={this.tt.onResizePressIn} style={{marginLeft: "auto", cursor: "col-resize"}}>
+            <Text>
+              |
+            </Text>
+          </Pressable>
+        </View>
+      </ColumnInHeadComponent>
+    )
+  }
+
+  onResizeEnd = async () => {
+    this.setState({cursorX: undefined, resizing: false})
+
+    await this.p.tableSettingColumn.update({
+      width: this.s.width
+    })
+  }
+
+  onResizePressIn = (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+
+    const originalWidth = this.s.width || this.tt.columnRef.current.offsetWidth
+    const cursorX = e.nativeEvent.pageX
+
+    this.setState({
+      cursorX,
+      originalWidth,
+      resizing: true
+    })
+  }
+
+  onWindowMouseMove = (e) => {
+    const {cursorX, resizing, originalWidth} = this.s
+
+    if (resizing) {
+      const newCursorX = e.pageX
+      const diffX = newCursorX - cursorX
+      const newWidth = originalWidth + diffX
+
+      this.setState({width: newWidth})
+    }
+  }
+
+  onWindowMouseUp = () => {
+    if (this.s.resizing) {
+      this.onResizeEnd()
+    }
+  }
+}))

package/src/table/model-row.jsx

@@ -1,17 +1,18 @@
+import BaseComponent from "../base-component"
 import classNames from "classnames"
 import columnIdentifier from "./column-identifier.mjs"
 import columnVisible from "./column-visible.mjs"
-import {digg, digs} from "diggerize"
+import {digs} from "diggerize"
 import * as inflection from "inflection"
 import Link from "../link"
 import MoneyFormatter from "../money-formatter"
 import PropTypes from "prop-types"
 import {memo} from "react"
-import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component"
+import {shapeComponent} from "set-state-compare/src/shape-component"
 
 const WorkerPluginsCheckbox = React.lazy(() => import("./worker-plugins-checkbox"))
 
-export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow extends ShapeComponent {
+export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow extends BaseComponent {
   static propTypes = {
     cacheKey: PropTypes.string.isRequired,
     model: PropTypes.object.isRequired,
@@ -21,10 +22,10 @@ export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow exte
   }
 
   render() {
-    const {model} = digs(this.props, "model")
-    const {modelClass, workplace} = digs(this.props.liveTable.props, "modelClass", "workplace")
-    const {actionsContent, columnsContent, destroyEnabled, editModelPath, viewModelPath} = digg(this, "props", "liveTable", "props")
-    const {columns, currentWorkplace} = digg(this, "props", "liveTable", "state")
+    const {model} = 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
 
     this.modelCallbackArgs = this._modelCallbackArgs() // 'model' can change so this needs to be re-cached for every render
 
@@ -39,7 +40,7 @@ export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow exte
     return (
       <RowComponent className={`live-table-row ${inflection.dasherize(modelClass.modelClassData().paramKey)}-row`} data-model-id={model.id()}>
         {workplace &&
-          <ColumnComponent className="workplace-column">
+          <ColumnComponent className="workplace-column" style={{width: 25, textAlign: "center"}}>
             <WorkerPluginsCheckbox currentWorkplace={currentWorkplace} model={model} />
           </ColumnComponent>
         }
@@ -77,7 +78,7 @@ export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow exte
   }
 
   columnsContentFromColumns (model) {
-    const {preparedColumns} = digs(this.props, "preparedColumns")
+    const {preparedColumns} = this.p
     const ColumnComponent = this.props.columnComponent
 
     return preparedColumns?.map(({column, tableSettingColumn}) => columnVisible(column, tableSettingColumn) &&
@@ -98,7 +99,7 @@ export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow exte
     )
   }
 
-  columnContentFromContentArg (column, model) {
+  columnContentFromContentArg (column, _model) {
     const value = column.content(this.modelCallbackArgs)
 
     return this.presentColumnValue(value)
@@ -135,7 +136,7 @@ export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow exte
   }
 
   _modelCallbackArgs () {
-    const {model} = digs(this.props, "model")
+    const {model} = this.p
     const modelArgName = inflection.camelize(this.props.liveTable.props.modelClass.modelClassData().name, true)
     const modelCallbackArgs = {model}
 
@@ -147,8 +148,8 @@ export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow exte
   onDestroyClicked = async (e) => {
     e.preventDefault()
 
-    const {destroyMessage} = digg(this, "props", "liveTable", "props")
-    const {model} = digs(this.props, "model")
+    const {destroyMessage} = this.p.liveTable.props
+    const {model} = this.p
 
     if (!confirm(I18n.t("js.shared.are_you_sure"))) {
       return

package/src/table/style.scss

@@ -1,6 +1,10 @@
 @import "./variables";
 
 .api-maker--table {
+  table {
+    table-layout: fixed;
+  }
+
   .live-table-header {
     text-align: left;
   }

package/src/table/table.jsx

@@ -1,4 +1,5 @@
 import "./style"
+import BaseComponent from "../base-component"
 import Card from "../bootstrap/card"
 import classNames from "classnames"
 import Collection from "../collection"
@@ -6,6 +7,7 @@ import columnVisible from "./column-visible.mjs"
 import debounce from "debounce"
 import {digg, digs} from "diggerize"
 import Filters from "./filters"
+import HeaderColumn from "./header-column"
 import * as inflection from "inflection"
 import modelClassRequire from "../model-class-require.mjs"
 import ModelRow from "./model-row"
@@ -16,8 +18,7 @@ import React, {memo, useEffect, useRef} from "react"
 import selectCalculator from "./select-calculator"
 import Select from "../inputs/select"
 import Settings from "./settings"
-import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component"
-import SortLink from "../bootstrap/sort-link"
+import {shapeComponent} from "set-state-compare/src/shape-component"
 import TableSettings from "./table-settings"
 import uniqunize from "uniqunize"
 import useBreakpoint from "./use-breakpoint"
@@ -27,7 +28,7 @@ import useQueryParams from "on-location-changed/src/use-query-params.js"
 const paginationOptions = [30, 60, 90, ["All", "all"]]
 const WorkerPluginsCheckAllCheckbox = React.lazy(() => import("./worker-plugins-check-all-checkbox"))
 
-export default memo(shapeComponent(class ApiMakerTable extends ShapeComponent {
+export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
   static defaultProps = {
     card: true,
     destroyEnabled: true,
@@ -87,7 +88,7 @@ export default memo(shapeComponent(class ApiMakerTable extends ShapeComponent {
       filterFormRef: useRef()
     })
 
-    const collectionKey = digg(this.props.modelClass.modelClassData(), "collectionKey")
+    const collectionKey = digg(this.p.modelClass.modelClassData(), "collectionKey")
     let queryName = this.props.queryName
 
     if (!queryName) queryName = collectionKey
@@ -188,9 +189,9 @@ export default memo(shapeComponent(class ApiMakerTable extends ShapeComponent {
   }
 
   render () {
-    const {modelClass, noRecordsAvailableContent, noRecordsFoundContent} = digs(this.props, "modelClass", "noRecordsAvailableContent", "noRecordsFoundContent")
+    const {modelClass, noRecordsAvailableContent, noRecordsFoundContent} = this.p
     const {collection, currentUser} = this.props
-    const {queryName, querySName, showFilters} = digs(this.state, "queryName", "querySName", "showFilters")
+    const {queryName, querySName, showFilters} = this.s
     const {
       models,
       overallCount,
@@ -362,8 +363,8 @@ export default memo(shapeComponent(class ApiMakerTable extends ShapeComponent {
   }
 
   filterForm = () => {
-    const {filterFormRef, submitFilter, submitFilterDebounce} = digs(this, "filterFormRef", "submitFilter", "submitFilterDebounce")
-    const {filterContent, filterSubmitButton} = digs(this.props, "filterContent", "filterSubmitButton")
+    const {filterFormRef, submitFilter, submitFilterDebounce} = this.tt
+    const {filterContent, filterSubmitButton} = this.p
     const {filterSubmitLabel} = this.props
     const {qParams} = digs(this.collection, "qParams")
 
@@ -395,7 +396,7 @@ export default memo(shapeComponent(class ApiMakerTable extends ShapeComponent {
   }
 
   onPerPageChanged = (e) => {
-    const {queryName} = digs(this.state, "queryName")
+    const {queryName} = this.s
     const newPerPageValue = digg(e, "target", "value")
     const perKey = `${queryName}_per`
     const paramsChange = {}
@@ -407,20 +408,20 @@ export default memo(shapeComponent(class ApiMakerTable extends ShapeComponent {
 
   tableControls() {
     const {controls} = this.props
-    const {showSettings} = digs(this.state, "showSettings")
+    const {showSettings} = this.s
     const {models, qParams, query, result} = digs(this.collection, "models", "qParams", "query", "result")
 
     return (
       <>
         {controls && controls({models, qParams, query, result})}
-        <a className="filter-button" href="#" onClick={digg(this, "onFilterClicked")}>
+        <a className="filter-button" href="#" onClick={this.tt.onFilterClicked}>
           <i className="fa fa-fw fa-magnifying-glass la la-fw la-search" />
         </a>
         <span style={{position: "relative"}}>
           {showSettings &&
-            <Settings onRequestClose={this.onRequestCloseSettings} table={this} />
+            <Settings onRequestClose={this.tt.onRequestCloseSettings} table={this} />
           }
-          <a className="settings-button" href="#" onClick={digg(this, "onSettingsClicked")}>
+          <a className="settings-button" href="#" onClick={this.tt.onSettingsClicked}>
             <i className="fa fa-fw fa-gear la la-fw la-gear" />
           </a>
         </span>
@@ -429,9 +430,9 @@ export default memo(shapeComponent(class ApiMakerTable extends ShapeComponent {
   }
 
   tableContent () {
-    const {workplace} = digs(this.props, "workplace")
-    const {breakpoint} = digs(this, "breakpoint")
-    const {currentWorkplace, preparedColumns, tableSettingFullCacheKey} = digs(this.state, "currentWorkplace", "preparedColumns", "tableSettingFullCacheKey")
+    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()
     const RowComponent = this.rowComponent()
@@ -451,7 +452,7 @@ export default memo(shapeComponent(class ApiMakerTable extends ShapeComponent {
         <HeadComponent>
           <RowComponent className="live-table-header-row">
             {workplace && currentWorkplace &&
-              <ColumnInHeadComponent>
+              <ColumnInHeadComponent style={{width: 25, textAlign: "center"}}>
                 <WorkerPluginsCheckAllCheckbox currentWorkplace={currentWorkplace} query={query} />
               </ColumnInHeadComponent>
             }
@@ -498,7 +499,7 @@ export default memo(shapeComponent(class ApiMakerTable extends ShapeComponent {
           <Select
             className="per-page-select"
             defaultValue={perPage}
-            onChange={digg(this, "onPerPageChanged")}
+            onChange={this.tt.onPerPageChanged}
             options={paginationOptions}
           />
         </div>
@@ -535,28 +536,9 @@ export default memo(shapeComponent(class ApiMakerTable extends ShapeComponent {
   responsiveComponent = (largeComponent) => this.isSmallScreen() ? "div" : largeComponent
   rowComponent = () => this.responsiveComponent("tr")
 
-  headersContentFromColumns () {
-    const {defaultParams} = this.props
-    const {preparedColumns} = digs(this.state, "preparedColumns")
-    const {query} = digs(this.collection, "query")
-    const ColumnInHeadComponent = this.columnInHeadComponent()
-
-    return preparedColumns?.map(({column, tableSettingColumn}) => columnVisible(column, tableSettingColumn) &&
-      <ColumnInHeadComponent
-        className={classNames(...this.headerClassNameForColumn(column))}
-        data-identifier={tableSettingColumn.identifier()}
-        key={tableSettingColumn.identifier()}
-        {...this.columnProps(column)}
-      >
-        {tableSettingColumn.hasSortKey() && query &&
-          <SortLink attribute={tableSettingColumn.sortKey()} defaultParams={defaultParams} query={query} title={this.headerLabelForColumn(column)} />
-        }
-        {(!tableSettingColumn.hasSortKey() || !query) &&
-          this.headerLabelForColumn(column)
-        }
-      </ColumnInHeadComponent>
-    )
-  }
+  headersContentFromColumns = () => this.s.preparedColumns?.map(({column, tableSettingColumn}) => columnVisible(column, tableSettingColumn) &&
+    <HeaderColumn column={column} key={tableSettingColumn.identifier()} table={this} tableSettingColumn={tableSettingColumn} />
+  )
 
   headerClassNameForColumn (column) {
     const classNames = ["live-table-header"]
@@ -568,7 +550,7 @@ export default memo(shapeComponent(class ApiMakerTable extends ShapeComponent {
   }
 
   headerLabelForColumn (column) {
-    const {modelClass} = digs(this.props, "modelClass")
+    const {modelClass} = this.p
 
     if ("label" in column) {
       if (typeof column.label == "function") {
@@ -605,17 +587,16 @@ export default memo(shapeComponent(class ApiMakerTable extends ShapeComponent {
   onSettingsClicked = (e) => {
     e.preventDefault()
 
-    const {showSettings} = digs(this.state, "showSettings")
+    const {showSettings} = this.s
 
     this.setState({showSettings: !showSettings})
   }
 
   submitFilter = () => {
-    const {filterFormRef} = digs(this, "filterFormRef")
-    const filterForm = digg(filterFormRef, "current")
+    const filterForm = digg(this.tt.filterFormRef, "current")
     const {appHistory} = this.props
     const qParams = Params.serializeForm(filterForm)
-    const {queryQName} = digs(this.state, "queryQName")
+    const {queryQName} = this.s
     const changeParamsParams = {}
 
     changeParamsParams[queryQName] = JSON.stringify(qParams)
@@ -623,5 +604,5 @@ export default memo(shapeComponent(class ApiMakerTable extends ShapeComponent {
     Params.changeParams(changeParamsParams, {appHistory})
   }
 
-  submitFilterDebounce = debounce(digg(this, "submitFilter"))
+  submitFilterDebounce = debounce(this.tt.submitFilter)
 }))