@kaspernj/api-maker 1.0.434 → 1.0.435

package/src/table/components/header.jsx

@@ -1,12 +1,20 @@
 import BaseComponent from "../../base-component"
-import {memo} from "react"
+import classNames from "classnames"
+import memo from "set-state-compare/src/memo"
 import {shapeComponent} from "set-state-compare/src/shape-component"
 import {View} from "react-native"
 
 export default memo(shapeComponent(class SharedTableHeader extends BaseComponent {
   render() {
+    const {dataSet, ...restProps} = this.props
+    const {component, ...restDataSet} = dataSet || {}
+    const actualDataSet = Object.assign(
+      {component: classNames("api-maker/table/header", component)},
+      restDataSet
+    )
+
     return (
-      <View {...this.props} />
+      <View dataSet={actualDataSet} {...restProps} />
     )
   }
 }))

package/src/table/components/row.jsx

@@ -1,5 +1,5 @@
 import BaseComponent from "../../base-component"
-import {memo} from "react"
+import memo from "set-state-compare/src/memo"
 import {shapeComponent} from "set-state-compare/src/shape-component"
 import useBreakpoint from "../../use-breakpoint"
 import {View} from "react-native"

package/src/table/filters/attribute-element.jsx

@@ -2,7 +2,7 @@ import BaseComponent from "../../base-component"
 import {digg} from "diggerize"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
-import {memo} from "react"
+import memo from "set-state-compare/src/memo"
 import {Pressable} from "react-native"
 import {shapeComponent} from "set-state-compare/src/shape-component"
 import Text from "../../utils/text"

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

@@ -4,9 +4,10 @@ import {digg, digs} from "diggerize"
 import * as inflection from "inflection"
 import {Form} from "../../form"
 import Input from "../../inputs/input"
+import memo from "set-state-compare/src/memo"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
-import {memo, useMemo, useRef} from "react"
+import {useMemo, useRef} from "react"
 import {ActivityIndicator, View} from "react-native"
 import ReflectionElement from "./reflection-element"
 import ScopeElement from "./scope-element"

package/src/table/filters/filter.jsx

@@ -3,7 +3,7 @@ import BaseComponent from "../../base-component"
 import FontAwesomeIcon from "react-native-vector-icons/FontAwesome"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
-import {memo} from "react"
+import memo from "set-state-compare/src/memo"
 import {shapeComponent} from "set-state-compare/src/shape-component"
 import Text from "../../utils/text"
 

package/src/table/filters/index.jsx

@@ -5,7 +5,7 @@ import FilterForm from "./filter-form"
 import LoadSearchModal from "./load-search-modal"
 import SaveSearchModal from "./save-search-modal"
 import PropTypes from "prop-types"
-import {memo} from "react"
+import memo from "set-state-compare/src/memo"
 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"

package/src/table/filters/load-search-modal.jsx

@@ -2,7 +2,8 @@ import apiMakerConfig from "@kaspernj/api-maker/src/config.mjs"
 import BaseComponent from "../../base-component"
 import classNames from "classnames"
 import {digg} from "diggerize"
-import {memo, useMemo} from "react"
+import memo from "set-state-compare/src/memo"
+import {useMemo} from "react"
 import {shapeComponent} from "set-state-compare/src/shape-component.js"
 import {TableSearch} from "../../models.mjs.erb"
 import {Pressable, View} from "react-native"

package/src/table/filters/reflection-element.jsx

@@ -1,7 +1,7 @@
 import BaseComponent from "../../base-component"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
-import {memo} from "react"
+import memo from "set-state-compare/src/memo"
 import {Pressable} from "react-native"
 import {shapeComponent} from "set-state-compare/src/shape-component"
 import Text from "../../utils/text"

package/src/table/filters/save-search-modal.jsx

@@ -6,7 +6,7 @@ import {Form} from "../../form"
 import Input from "../../bootstrap/input"
 import modelClassRequire from "../../model-class-require.mjs"
 import {shapeComponent} from "set-state-compare/src/shape-component.js"
-import {memo} from "react"
+import memo from "set-state-compare/src/memo"
 import useI18n from "i18n-on-steroids/src/use-i18n.mjs"
 
 const TableSearch = modelClassRequire("TableSearch")

package/src/table/filters/scope-element.jsx

@@ -1,6 +1,6 @@
 import BaseComponent from "../../base-component"
 import PropTypes from "prop-types"
-import {memo} from "react"
+import memo from "set-state-compare/src/memo"
 import {Pressable} from "react-native"
 import {shapeComponent} from "set-state-compare/src/shape-component"
 import Text from "../../utils/text"

package/src/table/header-column-content.jsx

@@ -0,0 +1,54 @@
+import BaseComponent from "../base-component"
+import {digs} from "diggerize"
+import memo from "set-state-compare/src/memo"
+import {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 Text from "../utils/text"
+
+export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseComponent {
+  static propTypes = propTypesExact({
+    column: PropTypes.object.isRequired,
+    sortLinkProps: PropTypes.object,
+    table: PropTypes.object.isRequired,
+    tableSettingColumn: PropTypes.object.isRequired
+  })
+
+  render() {
+    const {column, table, tableSettingColumn} = this.p
+    const {defaultParams} = table.props
+    const {styleForHeaderText} = table.tt
+    const {query} = digs(table.collection, "query")
+    const columnProps = table.columnProps(column)
+
+    return (
+      <View
+        dataSet={{
+          component: "api-maker/table/header-column-content",
+          identifier: tableSettingColumn.identifier()
+        }}
+        style={{display: "flex", flexDirection: "row", alignItems: "center"}}
+        {...columnProps}
+      >
+        {tableSettingColumn.hasSortKey() && query &&
+          <SortLink
+            attribute={tableSettingColumn.sortKey()}
+            defaultParams={defaultParams}
+            query={query}
+            style={{whiteSpace: "nowrap", overflow: "hidden"}}
+            textProps={{ellipsizeMode: "clip", numberOfLines: 1, style: styleForHeaderText()}}
+            title={table.headerLabelForColumn(column)}
+            {...this.props.sortLinkProps}
+          />
+        }
+        {(!tableSettingColumn.hasSortKey() || !query) &&
+          <Text ellipsizeMode="clip" numberOfLines={1}>
+            {table.headerLabelForColumn(column)}
+          </Text>
+        }
+      </View>
+    )
+  }
+}))

package/src/table/header-column.jsx

@@ -2,7 +2,8 @@ import BaseComponent from "../base-component"
 import classNames from "classnames"
 import {digs} from "diggerize"
 import Header from "./components/header"
-import {memo} from "react"
+import HeaderColumnContent from "./header-column-content"
+import memo from "set-state-compare/src/memo"
 import {Platform, Pressable, View} from "react-native"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
@@ -64,23 +65,7 @@ export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseC
         style={styleForHeader({style: actualStyle})}
         {...restColumnProps}
       >
-        <View style={{display: "flex", flexDirection: "row", alignItems: "center"}}>
-          {tableSettingColumn.hasSortKey() && query &&
-            <SortLink
-              attribute={tableSettingColumn.sortKey()}
-              defaultParams={defaultParams}
-              query={query}
-              style={{whiteSpace: "nowrap", overflow: "hidden"}}
-              textProps={{ellipsizeMode: "clip", numberOfLines: 1, style: styleForHeaderText()}}
-              title={table.headerLabelForColumn(column)}
-            />
-          }
-          {(!tableSettingColumn.hasSortKey() || !query) &&
-            <Text ellipsizeMode="clip" numberOfLines={1}>
-              {table.headerLabelForColumn(column)}
-            </Text>
-          }
-        </View>
+        <HeaderColumnContent column={column} table={table} tableSettingColumn={tableSettingColumn} />
         {mdUp &&
           <Pressable
             onMouseDown={Platform.OS == "web" ? this.tt.onResizeMouseDown : undefined}

package/src/table/header-select.jsx

@@ -0,0 +1,72 @@
+import {Pressable, View} from "react-native"
+import BaseComponent from "../base-component"
+import Collection from "../collection"
+import HeaderColumnContent from "./header-column-content"
+import memo from "set-state-compare/src/memo"
+import Modal from "../utils/modal"
+import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+import Text from "../utils/text"
+import useI18n from "i18n-on-steroids/src/use-i18n.mjs"
+import useSorting from "./use-sorting"
+
+export default memo(shapeComponent(class ApiMakerTableHeaderSelect extends BaseComponent {
+  static propTypes = propTypesExact({
+    preparedColumns: PropTypes.array.isRequired,
+    query: PropTypes.instanceOf(Collection).isRequired,
+    table: PropTypes.object
+  })
+
+  setup() {
+    const {t} = useI18n({namespace: "js.api_maker.table.header_select"})
+    const {preparedColumns, query} = this.p
+    const {qParams, searchKey, sortAttribute, sortMode} = useSorting({query})
+
+    this.useStates({
+      modalOpen: false
+    })
+    this.setInstance({qParams, searchKey, sortAttribute, sortMode, t})
+    this.sortedByPreparedColumn = preparedColumns.find((preparedColumn) => preparedColumn.tableSettingColumn.sortKey() == sortAttribute)
+  }
+
+  render() {
+    const {sortedByPreparedColumn, sortMode, t} = this.tt
+    const {table} = this.p
+    const column = sortedByPreparedColumn?.column
+    const columnLabel = column && table.headerLabelForColumn(column)
+
+    return (
+      <View dataSet={{component: "api-maker/table/header-select"}}>
+        {this.s.modalOpen &&
+          <Modal dataSet={{class: "table-header-select-modal"}} onRequestClose={this.tt.onModalRequestClose} transparent>
+            {this.p.preparedColumns.map(({column, tableSettingColumn}) =>
+              <View
+                key={tableSettingColumn.identifier()}
+                style={{marginVertical: 5}}
+              >
+                <HeaderColumnContent column={column} table={table} tableSettingColumn={tableSettingColumn} sortLinkProps={{usePressable: true}} />
+              </View>
+            )}
+          </Modal>
+        }
+        <Pressable onPress={this.tt.onSortedByPress}>
+          <Text>
+            {sortedByPreparedColumn && sortMode == "asc" &&
+              t(".sorted_by_column", {column: columnLabel, defaultValue: "Sorted by %{column}"})
+            }
+            {sortedByPreparedColumn && sortMode == "desc" &&
+              t(".sorted_by_column_reversed", {column: columnLabel, defaultValue: "Sorted by %{column} reversed"})
+            }
+            {!sortedByPreparedColumn &&
+              t(".not_sorted", {defaultValue: "Not sorted"})
+            }
+          </Text>
+        </Pressable>
+      </View>
+    )
+  }
+
+  onModalRequestClose = () => this.setState({modalOpen: false})
+  onSortedByPress = () => this.setState({modalOpen: true})
+}))

package/src/table/model-column.jsx

@@ -6,7 +6,7 @@ import ColumnContent from "./column-content"
 import columnIdentifier from "./column-identifier.mjs"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
-import {memo} from "react"
+import memo from "set-state-compare/src/memo"
 import {shapeComponent} from "set-state-compare/src/shape-component"
 import Text from "../utils/text"
 import useBreakpoint from "../use-breakpoint"
@@ -16,7 +16,6 @@ export default memo(shapeComponent(class ApiMakerTableModelColumn extends BaseCo
     column: PropTypes.object.isRequired,
     columnIndex: PropTypes.number.isRequired,
     even: PropTypes.bool.isRequired,
-    isSmallScreen: PropTypes.bool.isRequired,
     model: PropTypes.object.isRequired,
     table: PropTypes.object.isRequired,
     tableSettingColumn: PropTypes.object.isRequired,
@@ -25,7 +24,7 @@ export default memo(shapeComponent(class ApiMakerTableModelColumn extends BaseCo
 
   render() {
     const {mdUp} = useBreakpoint()
-    const {column, columnIndex, even, isSmallScreen, model, table, width} = this.props
+    const {column, columnIndex, even, model, table, width} = this.props
     const columnProps = table.columnProps(column)
     const {style, ...restColumnProps} = columnProps
     const actualStyle = Object.assign(
@@ -49,7 +48,7 @@ export default memo(shapeComponent(class ApiMakerTableModelColumn extends BaseCo
         style={actualStyle}
         {...restColumnProps}
       >
-        {isSmallScreen &&
+        {!mdUp &&
           <View dataSet={{class: "table--column-label"}}>
             <Text style={{fontWeight: "bold"}}>
               {table.headerLabelForColumn(column)}

package/src/table/model-row.jsx

@@ -11,7 +11,7 @@ import ModelColumn from "./model-column"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
 import Row from "./components/row"
-import {memo} from "react"
+import memo from "set-state-compare/src/memo"
 import {shapeComponent} from "set-state-compare/src/shape-component"
 
 const WorkerPluginsCheckbox = React.lazy(() => import("./worker-plugins-checkbox"))
@@ -21,7 +21,6 @@ export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow exte
     cacheKey: PropTypes.string.isRequired,
     columnWidths: PropTypes.object.isRequired,
     index: PropTypes.number.isRequired,
-    isSmallScreen: PropTypes.bool.isRequired,
     model: PropTypes.object.isRequired,
     table: PropTypes.object.isRequired,
     preparedColumns: PropTypes.array,
@@ -86,14 +85,13 @@ export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow exte
   }
 
   columnsContentFromColumns(model, even) {
-    const {isSmallScreen, table, preparedColumns} = this.p
+    const {table, preparedColumns} = this.p
 
     return preparedColumns?.map(({column, tableSettingColumn, width}, columnIndex) => columnVisible(column, tableSettingColumn) &&
       <ModelColumn
         column={column}
         columnIndex={columnIndex}
         even={even}
-        isSmallScreen={isSmallScreen}
         key={columnIdentifier(column)}
         model={model}
         table={table}

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

@@ -1,8 +1,9 @@
 import BaseComponent from "../../base-component"
 import columnIdentifier from "../column-identifier.mjs"
+import memo from "set-state-compare/src/memo"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
-import {memo, useEffect, useRef} from "react"
+import {useEffect, useRef} from "react"
 import {shapeComponent} from "set-state-compare/src/shape-component.js"
 import Text from "../../utils/text"
 import {View} from "react-native"

package/src/table/settings/download-action.jsx

@@ -4,7 +4,7 @@ import columnIdentifier from "../column-identifier.mjs"
 import columnVisible from "../column-visible.mjs"
 import {saveAs} from "file-saver"
 import FontAwesomeIcon from "react-native-vector-icons/FontAwesome"
-import {memo} from "react"
+import memo from "set-state-compare/src/memo"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
 import {renderToString} from "react-dom/server"

package/src/table/settings/index.jsx

@@ -2,7 +2,8 @@ import BaseComponent from "../../base-component"
 import columnIdentifier from "../column-identifier.mjs"
 import ColumnRow from "./column-row"
 import DownloadAction from "./download-action"
-import {memo, useRef} from "react"
+import {useRef} from "react"
+import memo from "set-state-compare/src/memo"
 import Modal from "../../modal"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"

package/src/table/table.jsx

@@ -11,13 +11,15 @@ import FlatList from "./components/flat-list"
 import FontAwesomeIcon from "react-native-vector-icons/FontAwesome"
 import Header from "./components/header"
 import HeaderColumn from "./header-column"
+import HeaderSelect from "./header-select"
 import * as inflection from "inflection"
+import memo from "set-state-compare/src/memo"
 import modelClassRequire from "../model-class-require.mjs"
 import ModelRow from "./model-row"
 import Paginate from "../bootstrap/paginate"
 import Params from "../params"
 import PropTypes from "prop-types"
-import React, {memo, useMemo, useRef} from "react"
+import React, {createContext, useContext, useMemo, useRef} from "react"
 import Row from "./components/row"
 import selectCalculator from "./select-calculator"
 import Select from "../inputs/select"
@@ -42,6 +44,45 @@ const styleSheet = StyleSheet.create({
     overflowX: "auto"
   }
 })
+const TableContext = createContext()
+
+const ListHeaderComponent = memo(() => {
+  const {mdUp} = useBreakpoint()
+  const tableContextValue = useContext(TableContext)
+  const table = tableContextValue.table
+  const {collection, queryWithoutPagination, t} = table.tt
+  const {query} = digs(collection, "query")
+
+  return (
+    <Row dataSet={{class: "api-maker/table/header-row"}} style={table.styleForRowHeader()}>
+      {table.p.workplace && table.s.currentWorkplace &&
+        <Header style={table.styleForHeader({style: {width: mdUp ? 41 : undefined}})}>
+          <WorkerPluginsCheckAllCheckbox
+            currentWorkplace={table.s.currentWorkplace}
+            query={queryWithoutPagination}
+            style={{marginHorizontal: "auto"}}
+          />
+          {!mdUp &&
+            <Text style={{marginLeft: 3}}>
+              {t(".select_all_found", {defaultValue: "Select all found"})}
+            </Text>
+          }
+        </Header>
+      }
+      {!mdUp &&
+        <Header style={table.styleForHeader({style: {}})}>
+          <HeaderSelect preparedColumns={table.s.preparedColumns} query={query} table={table} />
+        </Header>
+      }
+      {mdUp &&
+        <>
+          {table.headersContentFromColumns()}
+          <Header style={table.styleForHeader({style: {}, type: "actions"})} />
+        </>
+      }
+    </Row>
+  )
+})
 
 export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
   static defaultProps = {
@@ -105,7 +146,6 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     this.setInstance({
       breakpoint,
       filterFormRef: useRef(),
-      isSmallScreen: breakpoint == "xs" || breakpoint == "sm",
       mdUp,
       t
     })
@@ -140,6 +180,8 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
       widths: null
     })
 
+    this.tableContextValue = useMemo(() => ({cacheKey: this.s.tableSettingFullCacheKey, table: this}), [this.s.tableSettingFullCacheKey])
+
     useMemo(() => {
       if (this.props.workplace) {
         this.loadCurrentWorkplace().then(() => {
@@ -391,17 +433,19 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     }
 
     const flatList = (
-      <FlatList
-        data={models}
-        dataSet={{class: classNames("api-maker--table", className)}}
-        extraData={this.s.lastUpdate}
-        keyExtractor={this.tt.keyExtrator}
-        ListHeaderComponent={this.tt.listHeaderComponent}
-        renderItem={this.tt.renderItem}
-        showsHorizontalScrollIndicator
-        style={styleSheet.flatList}
-        {...restProps}
-      />
+      <TableContext.Provider value={this.tt.tableContextValue}>
+        <FlatList
+          data={models}
+          dataSet={{class: classNames("api-maker--table", className), cacheKey: this.s.tableSettingFullCacheKey}}
+          extraData={this.s.lastUpdate}
+          keyExtractor={this.tt.keyExtrator}
+          ListHeaderComponent={ListHeaderComponent}
+          renderItem={this.tt.renderItem}
+          showsHorizontalScrollIndicator
+          style={styleSheet.flatList}
+          {...restProps}
+        />
+      </TableContext.Provider>
     )
 
     return (
@@ -468,7 +512,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     }
   }
 
-  keyExtrator = (model) => model.id()
+  keyExtrator = (model) => `${this.s.tableSettingFullCacheKey}-${model.id()}`
 
   filterForm = () => {
     const {filterFormRef, submitFilter, submitFilterDebounce} = this.tt
@@ -514,26 +558,6 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     Params.changeParams(paramsChange)
   }
 
-  listHeaderComponent = () => {
-    const {queryWithoutPagination} = this.tt
-
-    return (
-      <Row dataSet={{class: "api-maker/table/header-row"}} style={this.styleForRowHeader()}>
-        {this.p.workplace && this.s.currentWorkplace &&
-          <Header style={this.styleForHeader({style: {width: 41}})}>
-            <WorkerPluginsCheckAllCheckbox
-              currentWorkplace={this.s.currentWorkplace}
-              query={queryWithoutPagination}
-              style={{marginHorizontal: "auto"}}
-            />
-          </Header>
-        }
-        {this.headersContentFromColumns()}
-        <Header style={this.styleForHeader({style: {}, type: "actions"})} />
-      </Row>
-    )
-  }
-
   renderItem = ({index, item: model}) => {
     const {preparedColumns, tableSettingFullCacheKey} = this.s
 
@@ -541,7 +565,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
       return (
         <View>
           <Text>
-            Loading...
+            {this.t(".loading_dot_dot_dot", {defaultValue: "Loading..."})}
           </Text>
         </View>
       )
@@ -552,7 +576,6 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
         cacheKey={model.cacheKey()}
         columnWidths={this.columnWidths()}
         index={index}
-        isSmallScreen={this.tt.isSmallScreen}
         key={model.id()}
         model={model}
         preparedColumns={preparedColumns}
@@ -563,7 +586,6 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
   }
 
   styleForColumn = ({column, columnIndex, even, style, type}) => {
-    const {mdUp} = this.tt
     const defaultStyle = {
       justifyContent: "center",
       padding: 8,
@@ -575,12 +597,12 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
       defaultStyle.flexDirection = "row"
       defaultStyle.alignItems = "center"
 
-      if (mdUp) {
+      if (this.tt.mdUp) {
         defaultStyle.marginLeft = "auto"
       } else {
         defaultStyle.marginRight = "auto"
       }
-    } else {
+    } else if (this.tt.mdUp) {
       defaultStyle.borderRight = "1px solid #dbdbdb"
     }
 
@@ -592,12 +614,14 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     return actualStyle
   }
 
-  styleForHeader({column, columnIndex, style, type}) {
+  styleForHeader = ({column, columnIndex, style, type}) => {
     const defaultStyle = {
+      flexDirection: "row",
+      alignItems: "center",
       padding: 8
     }
 
-    if (type != "actions") {
+    if (type != "actions" && this.tt.mdUp) {
       defaultStyle.borderRight = "1px solid #dbdbdb"
     }
 

package/src/table/use-sorting.mjs

@@ -0,0 +1,30 @@
+import {camelize} from "inflection"
+import useQueryParams from "on-location-changed/src/use-query-params.js"
+
+const calculateQParams = (defaultParams, queryParams, searchKey) => {
+  if (searchKey in queryParams) {
+    return JSON.parse(queryParams[searchKey])
+  } else if (defaultParams) {
+    return {...defaultParams}
+  }
+
+  return {}
+}
+
+const useSorting = ({defaultParams, query}) => {
+  const queryParams = useQueryParams()
+  const searchKey = query.queryArgs.searchKey || "q"
+  const qParams = calculateQParams(defaultParams, queryParams, searchKey)
+  const matchSortParam = qParams.s?.match(/^(.+?)( asc| desc|)$/)
+  const sortAttribute = matchSortParam ? camelize(matchSortParam[1], true) : null
+  const sortMode = matchSortParam ? matchSortParam[2].trim() : null
+
+  return {
+    qParams,
+    searchKey,
+    sortAttribute,
+    sortMode
+  }
+}
+
+export default useSorting

package/src/table/worker-plugins-check-all-checkbox.jsx

@@ -1,7 +1,8 @@
-import {memo, useEffect, useMemo, useRef} from "react"
+import {useEffect, useMemo, useRef} from "react"
 import BaseComponent from "../base-component"
 import classNames from "classnames"
 import Collection from "../collection.mjs"
+import memo from "set-state-compare/src/memo"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
 import {shapeComponent} from "set-state-compare/src/shape-component"

package/src/table/worker-plugins-checkbox.jsx

@@ -1,10 +1,11 @@
 import BaseComponent from "../base-component"
 import classNames from "classnames"
 import {digg} from "diggerize"
+import memo from "set-state-compare/src/memo"
 import modelClassRequire from "../model-class-require.mjs"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
-import {memo, useMemo} from "react"
+import {useMemo} from "react"
 import {shapeComponent} from "set-state-compare/src/shape-component"
 import useModelEvent from "../use-model-event.js"