v1.0.6

- allow to provide custom observable or computed search-box to `table-state`
- clean up release-build folder

Signed-off-by: Roman <[email protected]>

.gitignore

@@ -2,3 +2,4 @@
 node_modules
 backup
 dist
+dev

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mobx-react-table-grid",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Easy to use and powerful react table-grid layout based on CSS-grid",
   "license": "MIT",
   "author": "ixrock",
@@ -9,15 +9,15 @@
     "build": "npm run build:clean && npm run build-lib && npm run build-types",
     "build-lib": "NODE_ENV=production webpack --mode production",
     "build-types": "tsc --project tsconfig-build-types.json",
-    "build:clean": "rimraf dist/",
-    "release-pack": "npm run build && npm pack dist/src/table",
-    "release-publish": "npm run build && npm publish dist/src/table"
+    "build:clean": "rimraf ./dist/",
+    "release-pack": "npm run build && npm pack ./dist",
+    "release-publish": "npm run build && npm publish ./dist"
   },
   "main": "index.js",
-  "types": "index.d.ts",
+  "types": "types/index.d.ts",
   "files": [
-    "index.css",
-    "*.*(js|d.ts|.css|.json)"
+    "types",
+    "*.*"
   ],
   "repository": {
     "type": "git",

src/table/table-state.ts

@@ -1,5 +1,5 @@
 import type React from "react";
-import { action, computed, IComputedValue, observable } from "mobx"
+import { action, computed, IComputedValue, IObservableValue, observable } from "mobx"
 import type { TableColumnId, TableDataColumn, TableDataRow, TableRowId } from "./index";
 import orderBy from "lodash/orderBy";
 
@@ -22,10 +22,17 @@ export interface CreateTableStateParams<ResourceItem = any> {
    * By default, tries to get unique ID via `dataItem.getById()` or `dataItem.id`
    */
   getRowId?: (dataItem: ResourceItem) => TableRowId;
+  /**
+   * Handle filtering results with search field
+   * mobx.computed() or mobx.observable.box() that participates in filtered rows state.
+   */
+  searchBox?: IComputedValue<string> | IObservableValue<string>;
 }
 
-export function createTableState<DataItem = any>({ headingColumns, dataItems, customizeRows, getRowId }: CreateTableStateParams<DataItem>) {
-  let tableColumnsAll: TableDataColumn<DataItem>[] = headingColumns.map((headColumn) => {
+export function createTableState<DataItem = any>(params: CreateTableStateParams<DataItem>) {
+  const { headingColumns, dataItems, customizeRows, getRowId, searchBox } = params;
+
+  const tableColumnsAll: TableDataColumn<DataItem>[] = headingColumns.map((headColumn) => {
     return {
       // copy heading columns definition
       ...headColumn,
@@ -65,7 +72,7 @@ export function createTableState<DataItem = any>({ headingColumns, dataItems, cu
     }
   });
 
-  const searchText = observable.box("");
+  const searchText = searchBox ?? observable.box("");
   const hiddenColumns = observable.set<TableColumnId>();
   const selectedRowsId = observable.set<TableRowId>();
   const sortedColumns = observable.map<TableColumnId, "asc" | "desc">();

tsconfig-build-types.json

@@ -2,7 +2,8 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "declaration": true,
-    "emitDeclarationOnly": true
+    "emitDeclarationOnly": true,
+    "declarationDir": "dist/types"
   },
   "include": [
     "types",

tsconfig.json

@@ -1,7 +1,6 @@
 {
   "compilerOptions": {
-    "rootDir": "./",
-    "outDir": "./dist/",
+    "baseUrl": ".",
     "jsx": "react",
     "target": "ES2019",
     "lib": ["ESNext", "DOM", "DOM.Iterable"],

webpack.config.ts

@@ -29,7 +29,7 @@ module.exports = {
   devtool: "source-map",
   externals: isDevelopment ? [] : externals, // exclude bundling with lib "react", "mobx", etc.
   output: {
-    path: path.resolve(__dirname, 'dist/src/table'),
+    path: path.resolve(__dirname, isDevelopment ? "dev" : "dist"),
     filename: '[name].js',
     libraryTarget: "this",
     library: {