react-base-table - npm Package Compare versions

Comparing version 0.2.0 to 1.0.0

es/BaseTable.js

@@ -510,3 +510,3 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-      tableWidth = Math.max(columnsWidth, Math.round(tableWidth));
+      tableWidth = Math.max(Math.round(columnsWidth), tableWidth);
     }
@@ -513,0 +513,0 @@

es/ColumnManager.js

@@ -109,3 +109,3 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
       if (!_this6.hasFrozenColumns()) return columns;
-      var mainColumns = []; //columns placeholder for the fixed table above them
+      var mainColumns = [];
 
@@ -115,2 +115,3 @@ _this6.getLeftFrozenColumns().forEach(function (column) {
 
+        //columns placeholder for the fixed table above them
         mainColumns.push(_objectSpread({}, column, (_objectSpread2 = {}, _objectSpread2[ColumnManager.PlaceholderKey] = true, _objectSpread2)));
@@ -117,0 +118,0 @@ });

es/ExpandIcon.js

@@ -48,4 +48,3 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
       style: {
-        display: 'inline-block',
-        outline: 'none',
+        fontFamily: 'initial',
         cursor: 'pointer',
@@ -58,5 +57,7 @@ userSelect: 'none',
         textAlign: 'center',
+        transition: 'transform 0.15s ease-out',
+        transform: "rotate(" + (expandable && expanded ? 90 : 0) + "deg)",
         marginLeft: depth * indentSize
       }
-    }), expandable && (expanded ? '-' : '+'));
+    }), expandable && "\u25B8");
   };
@@ -63,0 +64,0 @@

es/SortIndicator.js

@@ -29,3 +29,3 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
     }, style)
-  }, sortOrder === SortOrder.DESC ? '↓' : '↑');
+  }, sortOrder === SortOrder.DESC ? "\u2193" : "\u2191");
 };
@@ -32,0 +32,0 @@

lib/BaseTable.js

@@ -568,3 +568,3 @@ "use strict";
 
-        tableWidth = Math.max(columnsWidth, Math.round(tableWidth));
+        tableWidth = Math.max(Math.round(columnsWidth), tableWidth);
       }
@@ -571,0 +571,0 @@

lib/ColumnManager.js

@@ -133,5 +133,6 @@ "use strict";
         if (!_this6.hasFrozenColumns()) return columns;
-        var mainColumns = []; //columns placeholder for the fixed table above them
+        var mainColumns = [];
 
         _this6.getLeftFrozenColumns().forEach(function (column) {
+          //columns placeholder for the fixed table above them
           mainColumns.push(_objectSpread({}, column, _defineProperty({}, ColumnManager.PlaceholderKey, true)));
@@ -138,0 +139,0 @@ });

lib/ExpandIcon.js

@@ -77,4 +77,3 @@ "use strict";
         style: {
-          display: 'inline-block',
-          outline: 'none',
+          fontFamily: 'initial',
           cursor: 'pointer',
@@ -87,5 +86,7 @@ userSelect: 'none',
           textAlign: 'center',
+          transition: 'transform 0.15s ease-out',
+          transform: "rotate(".concat(expandable && expanded ? 90 : 0, "deg)"),
           marginLeft: depth * indentSize
         }
-      }), expandable && (expanded ? '-' : '+'));
+      }), expandable && "\u25B8");
     }
@@ -92,0 +93,0 @@ }, {

lib/SortIndicator.js

@@ -41,3 +41,3 @@ "use strict";
     }, style)
-  }, sortOrder === _SortOrder.default.DESC ? '↓' : '↑');
+  }, sortOrder === _SortOrder.default.DESC ? "\u2193" : "\u2191");
 };
@@ -44,0 +44,0 @@

package.json

 {
   "name": "react-base-table",
-  "version": "0.2.0",
+  "version": "1.0.0",
   "description": "a react table component to display large data set with high performance and flexibility",
@@ -31,2 +31,3 @@ "main": "lib/index.js",
     "prepush": "npm run test",
+    "prepublish": "npm run build && npm run test",
     "test": "jest"
@@ -33,0 +34,0 @@ },

README.md

@@ -39,6 +39,67 @@ # react-base-table
 
-*You have to polyfil `Array.prototype.findIndex` to make it works on IE*
+_You have to polyfil `Array.prototype.findIndex` to make it works on IE_
 
+## Advance
+
+BaseTable is designed to be the base component to build your own complex table component
+
+### Styling
+
+The simplest way is overriding the default styles (assuming you are using `scss`)
+
+```scss
+// override default variables for BaseTable
+$table-prefix: AdvanceTable;
+
+$table-font-size: $bim-font-size-small;
+$table-border-radius: 4px;
+$table-padding-left: 15px;
+$table-padding-right: 15px;
+$column-padding: 7.5px;
+...
+$show-frozen-rows-shadow: false;
+$show-frozen-columns-shadow: true;
+
+@import '~react-base-table/es/_BaseTable.scss';
+
+.#{$table-prefix} {
+  &:not(.#{$table-prefix}--show-left-shadow) {
+    .#{$table-prefix}__table-frozen-left {
+      box-shadow: none;
+    }
+  }
+
+  &:not(.#{$table-prefix}--show-right-shadow) {
+    .#{$table-prefix}__table-frozen-right {
+      box-shadow: none;
+    }
+  }
+
+  ...
+}
+```
+
+You can write your own styles from scratch or use CSS-in-JS solutions to achieve that
+
+### Custom components
+
+```jsx
+<BaseTable
+  classPrefix="AdvanceTable"
+  components={{
+    TableCell: AdvanceTableCell,
+    TableHeaderCell: AdvanceTableHeaderCell,
+    ExpandIcon: AdvanceExpandIcon,
+    SortIndicator: AdvanceSortIndicator,
+  }}
+  ...
+/>
+```
+
+### Custom renderers & props
+
+There are a lot of highly flexible props like `xxxRenderer` and `xxxProps` for you to build your own table component, please check the [api](https://autodesk.github.io/react-base-table/api) and [examples](https://autodesk.github.io/react-base-table/examples) for more details
+
 ## Contributing
 
-Please check [guidelines](CONTRIBUTING.md) for more details.
+Please check [guidelines](CONTRIBUTING.md) for more details

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

818486

increased by0.41%

Number of package files

75

increased by1.35%

Lines of code

5805

increased by0.07%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

105

increased by138.64%

No dependency changes