make data prop optional; fix: progressiveLoad scroll;

ngduc · ngduc · commit 35ef1215a6c7 · 2022-01-21T19:39:57.000-08:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,8 +1,9 @@
-## [0.17.0] - 2022-01-18
+## [0.17.1] - 2022-01-18
 - BREAKING: upgraded tabulator-tables to 5.0.10
 - BREAKING: added "events" prop, callback props (like: rowClick) are now deprecated.
 - feat: added "checkOptions" prop: if set to true, it will rerender when options changed.
 - feat: added typescript types: ReactTabulatorOptions
+- fix: for pagination using scroll & ajaxURL
 - use pnpm instead of npm
 
 ## [0.16.1] - 2021-11-15
diff --git a/lib/ConfigUtils.d.ts b/lib/ConfigUtils.d.ts
@@ -2,7 +2,7 @@ export interface IProps {
     events?: any;
     className?: string;
     columns: any[];
-    data: any[];
+    data?: any[];
     height?: number;
     layout?: string;
     layoutColumnsOnNewData?: boolean;
diff --git a/lib/ConfigUtils.js b/lib/ConfigUtils.js
@@ -68,18 +68,20 @@ var propsToOptions = function (props) { return __awaiter(void 0, void 0, void 0,
                 }
                 callbackNames = ['tableBuilt', 'rowClick', 'rowDblClick', 'rowContext', 'rowTap', 'rowDblTap', 'rowTapHold',
                     'rowAdded', 'rowDeleted', 'rowMoved', 'rowUpdated', 'rowSelectionChanged', 'rowSelected', 'rowDeselected', 'rowResized',
-                    'cellClick', 'cellDblClick', 'cellContext', 'cellTap', 'cellDblTap', 'cellTapHold', 'cellEditing', 'cellEdited', 'cellEditCancelled',
+                    'cellClick', 'cellDblClick', 'cellContext', 'cellTap', 'cellDblTap', 'cellTapHold', 'cellEditing', 'cellEditCancelled',
                     'columnMoved', 'columnResized', 'columnTitleChanged', 'columnVisibilityChanged',
-                    'htmlImporting', 'htmlImported', 'dataLoading', 'dataLoaded', 'dataChanged',
-                    'ajaxRequesting', 'ajaxResponse', 'ajaxError', 'dataFiltering', 'dataFiltered', 'dataSorting', 'dataSorted',
+                    'htmlImporting', 'htmlImported', 'dataLoading', 'dataLoaded',
+                    'ajaxRequesting', 'ajaxResponse', 'dataFiltering', 'dataFiltered', 'dataSorting', 'dataSorted',
                     'renderStarted', 'renderComplete', 'pageLoaded', 'localized', 'dataGrouping', 'dataGrouped',
                     'groupVisibilityChanged', 'groupClick', 'groupDblClick', 'groupContext', 'groupTap', 'groupDblTap', 'groupTapHold',
                     'movableRowsSendingStart', 'movableRowsSent', 'movableRowsSentFailed', 'movableRowsSendingStop', 'movableRowsReceivingStart', 'movableRowsReceived', 'movableRowsReceivedFailed', 'movableRowsReceivingStop',
                     'validationFailed', 'clipboardCopied', 'clipboardPasted', 'clipboardPasteError',
                     'downloadReady', 'downloadComplete'];
                 for (_a = 0, callbackNames_1 = callbackNames; _a < callbackNames_1.length; _a++) {
                     callbackName = callbackNames_1[_a];
-                    output[callbackName] = props[callbackName] || NOOPS;
+                    if (typeof props[callbackName] !== 'undefined') {
+                        output[callbackName] = props[callbackName] || NOOPS;
+                    }
                 }
                 if (!(typeof props['footerElement'] === 'object')) return [3 /*break*/, 2];
                 return [4 /*yield*/, syncRender(props['footerElement'], document.createElement('div'))];
diff --git a/lib/ReactTabulator.js b/lib/ReactTabulator.js
@@ -117,16 +117,11 @@ var default_1 = /** @class */ (function (_super) {
                         return [4 /*yield*/, (0, ConfigUtils_1.propsToOptions)(this.props)];
                     case 1:
                         propOptions = _c.sent();
-                        instance = new tabulator_tables_1.TabulatorFull(domEle, __assign(__assign(__assign(__assign({ columns: columns }, propOptions), { layout: (_a = this.props.layout) !== null && _a !== void 0 ? _a : 'fitColumns', 
-                            // tableBuilding() {
-                            //   that.table = this; // keep the table instance.
-                            //   that.props.tableBuilding ? that.props.tableBuilding() : '';
-                            // },
-                            // dataLoaded() {
-                            //   that.props.dataLoaded ? that.props.dataLoaded() : '';
-                            // },
-                            invalidOptionWarnings: false }), options), { // props.options are passed to Tabulator's options.
-                            data: data }));
+                        if (data) {
+                            propOptions.data = data;
+                        }
+                        instance = new tabulator_tables_1.TabulatorFull(domEle, __assign(__assign(__assign({ columns: columns }, propOptions), { layout: (_a = this.props.layout) !== null && _a !== void 0 ? _a : 'fitColumns' }), options // props.options are passed to Tabulator's options.
+                        ));
                         instance.on('tableBuilding', function () {
                             that.table = this; // keep the table instance.
                             that.props.tableBuilding ? that.props.tableBuilding() : '';
diff --git a/lib/ReactTabulatorExample.js b/lib/ReactTabulatorExample.js
@@ -110,30 +110,44 @@ var default_1 = /** @class */ (function (_super) {
                 { title: 'Email', field: 'email', width: 150 },
             ];
             var options = {
-                height: 150,
+                height: 100,
                 movableRows: true,
-                ajaxProgressiveLoad: 'scroll',
-                ajaxProgressiveLoadDelay: 200,
-                ajaxProgressiveLoadScrollMargin: 100,
+                progressiveLoad: 'scroll',
+                progressiveLoadDelay: 200,
+                progressiveLoadScrollMargin: 30,
                 ajaxURL: 'https://reqres.in/api/users',
-                paginationDataSent: {
-                    page: 'page',
-                    size: 'per_page' // change 'size' param to 'per_page'
+                dataSendParams: {
+                    page: "page",
+                    size: "per_page"
                 },
-                paginationDataReceived: {
-                    last_page: 'total_pages'
+                dataReceiveParams: {
+                    last_page: 'last'
                 },
-                current_page: 1,
-                paginationSize: 3,
+                paginationSize: 5,
                 ajaxResponse: function (url, params, response) {
-                    console.log('ajaxResponse', url);
-                    return response; //return the response data to tabulator
+                    console.log('url, params, response', url, params, response);
+                    return {
+                        data: response.data,
+                        last: response.total_pages
+                    };
                 },
                 ajaxError: function (error) {
                     console.log('ajaxError', error);
                 }
             };
-            return (React.createElement(ReactTabulator_1["default"], { ref: function (ref) { return (_this.ref = ref); }, columns: columns, data: [], options: options }));
+            return (React.createElement(ReactTabulator_1["default"], { ref: function (ref) { return (_this.ref = ref); }, columns: columns, options: options, events: {
+                    dataLoaded: function (data) {
+                        console.log('dataLoaded', data);
+                        // return data; //return the response data to tabulator
+                        var modResponse = {};
+                        modResponse.data = data;
+                        modResponse.last = 5;
+                        return modResponse;
+                    },
+                    ajaxError: function (error) {
+                        console.log('ajaxError', error);
+                    }
+                } }));
         };
         return _this;
     }
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-tabulator",
-  "version": "0.17.0",
+  "version": "0.17.1",
   "description": "React Tabulator is based on tabulator - a JS table library with many advanced features.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
diff --git a/src/ConfigUtils.tsx b/src/ConfigUtils.tsx
@@ -9,7 +9,7 @@ export interface IProps {
   events?: any; // example: <ReactTabulator events={{ rowClick: (ev, row) => {} }}... />
   className?: string;
   columns: any[];
-  data: any[];
+  data?: any[];
   height?: number;
   layout?: string, /// layout type "fitColumns" | "fitDataTable" | "fitDataStretch" | "fitData" - default: "fitData"
 	layoutColumnsOnNewData?: boolean, // update column widths on setData - default: false
@@ -140,18 +140,20 @@ export const propsToOptions = async (props: any) => {
 
   const callbackNames = ['tableBuilt','rowClick','rowDblClick','rowContext','rowTap','rowDblTap','rowTapHold',
     'rowAdded','rowDeleted','rowMoved','rowUpdated','rowSelectionChanged','rowSelected','rowDeselected','rowResized',
-    'cellClick','cellDblClick','cellContext','cellTap','cellDblTap','cellTapHold','cellEditing','cellEdited','cellEditCancelled',
+    'cellClick','cellDblClick','cellContext','cellTap','cellDblTap','cellTapHold','cellEditing','cellEditCancelled',
     'columnMoved','columnResized','columnTitleChanged','columnVisibilityChanged',
-    'htmlImporting','htmlImported','dataLoading','dataLoaded','dataChanged',
-    'ajaxRequesting','ajaxResponse','ajaxError','dataFiltering','dataFiltered','dataSorting','dataSorted',
+    'htmlImporting','htmlImported','dataLoading','dataLoaded',
+    'ajaxRequesting','ajaxResponse','dataFiltering','dataFiltered','dataSorting','dataSorted',
     'renderStarted','renderComplete','pageLoaded','localized','dataGrouping','dataGrouped',
     'groupVisibilityChanged','groupClick','groupDblClick','groupContext','groupTap','groupDblTap','groupTapHold',
     'movableRowsSendingStart','movableRowsSent','movableRowsSentFailed','movableRowsSendingStop','movableRowsReceivingStart','movableRowsReceived','movableRowsReceivedFailed','movableRowsReceivingStop',
     'validationFailed','clipboardCopied','clipboardPasted','clipboardPasteError',
     'downloadReady','downloadComplete']; // don't add "selectableCheck" here, it will break "rowSelectionChanged"
   
   for (const callbackName of callbackNames) {
-    output[callbackName] = props[callbackName] || NOOPS
+    if (typeof props[callbackName] !== 'undefined') {
+      output[callbackName] = props[callbackName] || NOOPS
+    }
   }
   if (typeof props['footerElement'] === 'object') {
     // convert from JSX to HTML string (tabulator's footerElement accepts string)
diff --git a/src/ReactTabulator.tsx b/src/ReactTabulator.tsx
@@ -38,6 +38,9 @@ export default class extends React.Component<IProps, Partial<IState>> {
     const that = this;
     const { columns, data, options } = this.props;
     const propOptions = await propsToOptions(this.props);
+    if (data) {
+      propOptions.data = data;
+    }
 
     const instance = new Tabulator(domEle, {
       columns,
@@ -50,9 +53,7 @@ export default class extends React.Component<IProps, Partial<IState>> {
       // dataLoaded() {
       //   that.props.dataLoaded ? that.props.dataLoaded() : '';
       // },
-      invalidOptionWarnings: false, // #102: disable console warnings for invalid table properties
-      ...options, // props.options are passed to Tabulator's options.
-      data
+      ...options // props.options are passed to Tabulator's options.
     });
     instance.on('tableBuilding', function () {
       that.table = this; // keep the table instance.
diff --git a/src/ReactTabulatorExample.tsx b/src/ReactTabulatorExample.tsx
@@ -103,37 +103,51 @@ export default class extends React.Component<IProps> {
       { title: 'Email', field: 'email', width: 150 },
     ]
     const options = {
-      height: 150,
+      height: 100,
       movableRows: true,
-      ajaxProgressiveLoad: 'scroll',
-      ajaxProgressiveLoadDelay: 200,
-      ajaxProgressiveLoadScrollMargin: 100,
+      progressiveLoad: 'scroll',
+      progressiveLoadDelay: 200,
+      progressiveLoadScrollMargin: 30,
       ajaxURL: 'https://reqres.in/api/users',
-      paginationDataSent: {
-        page: 'page',
-        size: 'per_page' // change 'size' param to 'per_page'
+      dataSendParams:{
+        page: "page",
+        size: "per_page",
       },
-      paginationDataReceived: {
-        last_page: 'total_pages'
+      dataReceiveParams:{
+        last_page: 'last'
       },
-      current_page: 1,
-      paginationSize: 3,
-      ajaxResponse: function(url: string, params, response) {
-        console.log('ajaxResponse', url);
-        return response; //return the response data to tabulator
+      paginationSize: 5,
+      ajaxResponse: (url, params, response) => {
+        console.log('url, params, response', url, params, response);
+        return {
+          data: response.data,
+          last: response.total_pages
+        };
       },
-      ajaxError: function(error) {
+      ajaxError: function (error) {
         console.log('ajaxError', error);
       }
-    }
+    };
     return (
       <ReactTabulator
-          ref={ref => (this.ref = ref)}
-          columns={columns}
-          data={[]}
-          options={options}
-        />
-    )
+        ref={(ref) => (this.ref = ref)}
+        columns={columns}
+        options={options}
+        events={{
+          dataLoaded: function (data) {
+            console.log('dataLoaded', data);
+            // return data; //return the response data to tabulator
+            let modResponse: any = {};
+            modResponse.data = data;
+            modResponse.last = 5;
+            return modResponse;
+          },
+          ajaxError: function (error) {
+            console.log('ajaxError', error);
+          }
+        }}
+      />
+    );
   }
 
   render() {

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "react-tabulator",`
`3`		`- "version": "0.17.0",`
	`3`	`+ "version": "0.17.1",`
`4`	`4`	`"description": "React Tabulator is based on tabulator - a JS table library with many advanced features.",`
`5`	`5`	`"main": "lib/index.js",`
`6`	`6`	`"types": "lib/index.d.ts",`