qbs-react-grid 1.1.50 → 1.1.52

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/es/qbsTable/QbsTable.js +11 -1
  2. package/es/qbsTable/commontypes.d.ts +3 -0
  3. package/es/qbsTable/utilities/empty.d.ts +7 -0
  4. package/es/qbsTable/utilities/empty.js +79 -0
  5. package/lib/qbsTable/QbsTable.js +11 -1
  6. package/lib/qbsTable/commontypes.d.ts +3 -0
  7. package/lib/qbsTable/utilities/empty.d.ts +7 -0
  8. package/lib/qbsTable/utilities/empty.js +85 -0
  9. package/package.json +1 -1
  10. package/src/qbsTable/QbsTable.tsx +15 -1
  11. package/src/qbsTable/commontypes.ts +3 -0
  12. package/src/qbsTable/utilities/empty.tsx +82 -0
package/es/qbsTable/QbsTable.js CHANGED
@@ -16,6 +16,7 @@ import { SettingsIcon } from './utilities/icons';
16
16
  // import 'qbs-react-table/dist/css/qbs-react-grid.css';
17
17
 
18
18
  import '../../dist/css/qbs-react-grid.css';
19
+ import NoData from './utilities/empty';
19
20
  var CHECKBOX_LINE_HEIGHT = '36px';
20
21
  var COLUMN_WIDTH = 250;
21
22
  var QbsTable = function QbsTable(_ref) {
@@ -87,7 +88,10 @@ var QbsTable = function QbsTable(_ref) {
87
88
  renderSortIcon = _ref.renderSortIcon,
88
89
  _ref$tableKey = _ref.tableKey,
89
90
  tableKey = _ref$tableKey === void 0 ? 'parent' : _ref$tableKey,
90
- autoHeight = _ref.autoHeight;
91
+ _renderEmpty = _ref.renderEmpty,
92
+ autoHeight = _ref.autoHeight,
93
+ emptySubTitle = _ref.emptySubTitle,
94
+ emptyTitle = _ref.emptyTitle;
91
95
  var _useState = useState(false),
92
96
  loading = _useState[0],
93
97
  setLoading = _useState[1];
@@ -419,6 +423,12 @@ var QbsTable = function QbsTable(_ref) {
419
423
  tableBodyHeight: tableBodyHeight,
420
424
  cellBordered: cellBordered,
421
425
  bordered: bordered,
426
+ renderEmpty: function renderEmpty(info) {
427
+ return _renderEmpty ? _renderEmpty(info) : /*#__PURE__*/React.createElement(NoData, {
428
+ title: emptyTitle != null ? emptyTitle : 'No Data Found',
429
+ subtitle: emptySubTitle != null ? emptySubTitle : 'No Data Found'
430
+ });
431
+ },
422
432
  columns: columns,
423
433
  minHeight: minHeight,
424
434
  headerHeight: headerHeight,
package/es/qbsTable/commontypes.d.ts CHANGED
@@ -113,6 +113,9 @@ export interface QbsTableProps {
113
113
  };
114
114
  rowExpandedHeight?: number;
115
115
  renderSortIcon?: (sortType?: 'desc' | 'asc') => React.ReactNode;
116
+ renderEmpty?: (info: React.ReactNode) => React.ReactNode;
117
+ emptySubTitle?: string;
118
+ emptyTitle?: string;
116
119
  }
117
120
  export interface QbsTableToolbarProps {
118
121
  title?: string;
package/es/qbsTable/utilities/empty.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import React from 'react';
2
+ type props = {
3
+ title?: string;
4
+ subtitle?: string;
5
+ };
6
+ declare const NoData: React.FC<props>;
7
+ export default NoData;
package/es/qbsTable/utilities/empty.js ADDED
@@ -0,0 +1,79 @@
1
+ import React from 'react';
2
+ var NoData = function NoData(_ref) {
3
+ var title = _ref.title,
4
+ subtitle = _ref.subtitle;
5
+ return /*#__PURE__*/React.createElement("div", {
6
+ style: {
7
+ display: 'flex',
8
+ flexDirection: 'column',
9
+ justifyContent: 'center',
10
+ alignItems: 'center',
11
+ justifyItems: 'center',
12
+ height: 'inherit'
13
+ }
14
+ }, /*#__PURE__*/React.createElement("div", {
15
+ style: {
16
+ width: 145,
17
+ marginBottom: 20
18
+ },
19
+ className: "nodata-img"
20
+ }, /*#__PURE__*/React.createElement("svg", {
21
+ xmlns: "http://www.w3.org/2000/svg",
22
+ width: "148",
23
+ height: "132",
24
+ fill: "none",
25
+ viewBox: "0 0 148 132"
26
+ }, /*#__PURE__*/React.createElement("circle", {
27
+ cx: "73.892",
28
+ cy: "65.924",
29
+ r: "63.212",
30
+ fill: "#717171",
31
+ fillOpacity: "0.08"
32
+ }), /*#__PURE__*/React.createElement("circle", {
33
+ cx: "73.892",
34
+ cy: "65.924",
35
+ r: "43.906",
36
+ fill: "#717171",
37
+ fillOpacity: "0.08"
38
+ }), /*#__PURE__*/React.createElement("path", {
39
+ stroke: "#797979",
40
+ strokeLinecap: "round",
41
+ strokeWidth: "3",
42
+ d: "M131.023 114.985H17.539M143.03 114.985h-7.576M13.124 114.985H9.903M5.883 114.985h-.295"
43
+ }), /*#__PURE__*/React.createElement("path", {
44
+ fill: "#fff",
45
+ d: "M40.531 49.985l6.83-3.163V30.717a7.41 7.41 0 017.41-7.41h42.173a7.41 7.41 0 017.41 7.41v16.105l3.9.797 14.208 39.694v26.572H28.511V87.313l12.02-37.328z"
46
+ }), /*#__PURE__*/React.createElement("path", {
47
+ fill: "#797979",
48
+ d: "M122.101 15.104l-.661-3.529 3.529-.66.661 3.528 3.529-.661.662 3.529-3.53.661.662 3.53-3.529.66-.662-3.528-3.529.661-.661-3.53 3.529-.66z"
49
+ }), /*#__PURE__*/React.createElement("path", {
50
+ fill: "#797979",
51
+ fillRule: "evenodd",
52
+ d: "M34.535 39.728c-3.721-1.297-4.65-6.256-1.652-8.813.856-.73 1.275-.925 2.465-1.148 1.19-.223 1.651-.193 2.713.178 2.698.94 4.09 3.9 3.129 6.654-.94 2.698-3.9 4.09-6.655 3.129zm2.125-3.133c1.566-.293 1.99-2.423.651-3.279a1.812 1.812 0 00-2.772 1.882c.191 1.018 1.066 1.595 2.12 1.397z",
53
+ clipRule: "evenodd"
54
+ }), /*#__PURE__*/React.createElement("path", {
55
+ fill: "#797979",
56
+ d: "M23.724 55.458l-.662-3.53 3.53-.66.66 3.529 3.53-.662.661 3.53-3.529.66.661 3.53-3.529.661-.661-3.529-3.53.661-.66-3.529 3.529-.661z"
57
+ }), /*#__PURE__*/React.createElement("path", {
58
+ fill: "#797979",
59
+ fillRule: "evenodd",
60
+ d: "M124.745 63.007c-3.722-1.297-4.651-6.256-1.652-8.813.856-.73 1.275-.924 2.465-1.147 1.19-.223 1.651-.193 2.713.177 2.698.94 4.089 3.9 3.128 6.655-.94 2.698-3.899 4.089-6.654 3.128zm2.124-3.133c1.566-.293 1.99-2.423.652-3.278a1.812 1.812 0 00-2.772 1.881c.191 1.018 1.066 1.595 2.12 1.398z",
61
+ clipRule: "evenodd"
62
+ }), /*#__PURE__*/React.createElement("path", {
63
+ fill: "#797979",
64
+ d: "M35.445 101.667a1.39 1.39 0 100 2.779h6.431a1.39 1.39 0 000-2.779h-6.43zM34.056 107.693a1.39 1.39 0 011.39-1.389h6.43a1.39 1.39 0 110 2.779h-6.43a1.39 1.39 0 01-1.39-1.39zM65.058 105.062a1.39 1.39 0 10-2.78 0v1.678a3.242 3.242 0 003.243 3.242h17.227a3.242 3.242 0 003.242-3.242v-1.678a1.39 1.39 0 10-2.779 0v1.678a.463.463 0 01-.463.463H65.52a.463.463 0 01-.463-.463v-1.678z"
65
+ }), /*#__PURE__*/React.createElement("path", {
66
+ fill: "#797979",
67
+ fillRule: "evenodd",
68
+ d: "M44.321 45.9c-1.212 0-2.228.253-3.028.826-.807.577-1.225 1.358-1.47 2.074l-.002.008-12.783 38.794v25.168c-.092.782.239 1.635 1.017 2.239.79.614 1.951.915 3.476.915h88.966l.081-.01c1.382-.162 3.111-1.507 3.111-4.372V87.599l-13.186-39.527-.041-.083c-.456-.932-1.647-2.09-3.771-2.09h-1.582v-.072a.926.926 0 00-1.852 0v1.777a.926.926 0 001.224.878v.196h2.21c.519 0 .822.133.992.243a.914.914 0 01.254.24l12.531 37.564h-7.241v-5.612a6.93 6.93 0 00-2.321-5.183c.033-.119.051-.245.051-.374v-8.66a6.949 6.949 0 00-5.848-6.86v-.88a.926.926 0 00-1.852 0v.794H48.291v-.794a.926.926 0 00-1.852 0v.802a6.947 6.947 0 00-6.605 6.939v8.659c0 .13.018.255.051.374a6.93 6.93 0 00-2.32 5.183v5.612h-7.312l12.202-37.032c.132-.383.279-.581.456-.708.184-.132.572-.307 1.41-.307h2.824v-.174a.926.926 0 001.146-.9v-1.777a.926.926 0 10-1.852 0v.072H44.32zm-1.708 28.529a6.952 6.952 0 011.898-.263h61.769a6.95 6.95 0 011.898.263v-7.532a4.168 4.168 0 00-4.168-4.169H46.781a4.168 4.168 0 00-4.168 4.169v7.531zm67.835 6.684v5.612h-8.946c-1.136 0-2.19.595-2.776 1.569l-4.84 8.031a.463.463 0 01-.397.224H56.656a.463.463 0 01-.391-.215l-5.127-8.1a3.242 3.242 0 00-2.74-1.509h-8.055v-5.612a4.168 4.168 0 014.168-4.168h61.769a4.168 4.168 0 014.168 4.168zm10.462 8.391h-19.408a.461.461 0 00-.396.224l-4.84 8.031a3.242 3.242 0 01-2.778 1.569H56.657a3.242 3.242 0 01-2.74-1.508l-5.126-8.1a.463.463 0 00-.392-.216h-18.58v23.348c.172.102.648.293 1.713.293h88.742a.715.715 0 00.262-.203c.145-.171.375-.565.375-1.4V89.504z",
69
+ clipRule: "evenodd"
70
+ }), /*#__PURE__*/React.createElement("path", {
71
+ fill: "#797979",
72
+ d: "M47.365 57.417a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 57.417a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 52.974a.926.926 0 00.926-.927V50.27a.926.926 0 00-1.852 0v1.777c0 .512.415.927.926.927zM104.183 52.974a.926.926 0 00.926-.927V50.27a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 44.088a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 44.088a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 39.645a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 39.645a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 35.202a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 35.202a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 30.758a.926.926 0 00.926-.926v-.888c0-.248.02-.49.057-.726a.926.926 0 00-1.83-.288c-.052.33-.08.67-.08 1.014v.888c0 .512.416.926.927.926zM104.183 30.758a.926.926 0 00.926-.926v-.888c0-.345-.027-.683-.079-1.014a.926.926 0 10-1.83.288c.037.236.057.478.057.726v.888c0 .512.414.926.926.926zM47.881 26.426a.926.926 0 001.294-.204c.286-.394.633-.74 1.026-1.026a.926.926 0 00-1.09-1.498c-.55.4-1.034.884-1.434 1.434a.926.926 0 00.204 1.294zM103.667 26.426a.926.926 0 00.204-1.294 6.509 6.509 0 00-1.434-1.434.926.926 0 00-1.09 1.498c.393.286.74.632 1.026 1.026a.926.926 0 001.294.204zM51.138 23.597c.08.506.554.851 1.059.772a4.67 4.67 0 01.726-.057h.914a.926.926 0 000-1.852h-.914c-.344 0-.683.026-1.014.078a.926.926 0 00-.77 1.06zM100.41 23.597a.927.927 0 00-.771-1.059 6.522 6.522 0 00-1.014-.078h-.914a.926.926 0 100 1.852h.914c.248 0 .49.02.726.057a.926.926 0 001.059-.772zM55.653 23.386c0 .511.415.926.926.926h1.828a.926.926 0 000-1.852H56.58a.926.926 0 00-.926.926zM60.223 23.386c0 .511.415.926.926.926h1.828a.926.926 0 000-1.852H61.15a.926.926 0 00-.926.926zM64.793 23.386c0 .511.415.926.926.926h1.829a.926.926 0 000-1.852h-1.829a.926.926 0 00-.926.926zM69.364 23.386c0 .511.414.926.926.926h1.828a.926.926 0 000-1.852H70.29a.926.926 0 00-.927.926zM73.934 23.386c0 .511.414.926.926.926h1.828a.926.926 0 000-1.852H74.86a.926.926 0 00-.926.926zM78.504 23.386c0 .511.415.926.926.926h1.828a.926.926 0 000-1.852H79.43a.926.926 0 00-.926.926zM83.074 23.386c0 .511.415.926.927.926h1.828a.926.926 0 000-1.852H84a.926.926 0 00-.927.926zM87.644 23.386c0 .511.415.926.927.926h1.828a.926.926 0 000-1.852H88.57a.926.926 0 00-.927.926zM92.215 23.386c0 .511.414.926.926.926h1.828a.926.926 0 000-1.852h-1.828a.926.926 0 00-.926.926zM72.178 36.453a1.39 1.39 0 10-1.965 1.965l3.797 3.797-3.797 3.798a1.39 1.39 0 001.965 1.965l3.797-3.798 3.798 3.798a1.39 1.39 0 001.965-1.965l-3.798-3.798 3.798-3.797a1.39 1.39 0 10-1.965-1.965l-3.798 3.797-3.797-3.797z"
73
+ })), ' '), /*#__PURE__*/React.createElement("p", {
74
+ className: "text-center text-common font-bold text-blackAlt nodata-title"
75
+ }, title), /*#__PURE__*/React.createElement("span", {
76
+ className: "text-xxs font-medium text-grey-medium nodata-sub-title"
77
+ }, subtitle));
78
+ };
79
+ export default NoData;
package/lib/qbsTable/QbsTable.js CHANGED
@@ -18,6 +18,7 @@ var _debounce = _interopRequireDefault(require("./utilities/debounce"));
18
18
  var _deepEqual = require("./utilities/deepEqual");
19
19
  var _icons = require("./utilities/icons");
20
20
  require("../../dist/css/qbs-react-grid.css");
21
+ var _empty = _interopRequireDefault(require("./utilities/empty"));
21
22
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
22
23
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
23
24
  // import 'qbs-react-table/dist/css/qbs-react-grid.css';
@@ -93,7 +94,10 @@ var QbsTable = function QbsTable(_ref) {
93
94
  renderSortIcon = _ref.renderSortIcon,
94
95
  _ref$tableKey = _ref.tableKey,
95
96
  tableKey = _ref$tableKey === void 0 ? 'parent' : _ref$tableKey,
96
- autoHeight = _ref.autoHeight;
97
+ _renderEmpty = _ref.renderEmpty,
98
+ autoHeight = _ref.autoHeight,
99
+ emptySubTitle = _ref.emptySubTitle,
100
+ emptyTitle = _ref.emptyTitle;
97
101
  var _useState = (0, _react.useState)(false),
98
102
  loading = _useState[0],
99
103
  setLoading = _useState[1];
@@ -425,6 +429,12 @@ var QbsTable = function QbsTable(_ref) {
425
429
  tableBodyHeight: tableBodyHeight,
426
430
  cellBordered: cellBordered,
427
431
  bordered: bordered,
432
+ renderEmpty: function renderEmpty(info) {
433
+ return _renderEmpty ? _renderEmpty(info) : /*#__PURE__*/_react["default"].createElement(_empty["default"], {
434
+ title: emptyTitle != null ? emptyTitle : 'No Data Found',
435
+ subtitle: emptySubTitle != null ? emptySubTitle : 'No Data Found'
436
+ });
437
+ },
428
438
  columns: columns,
429
439
  minHeight: minHeight,
430
440
  headerHeight: headerHeight,
package/lib/qbsTable/commontypes.d.ts CHANGED
@@ -113,6 +113,9 @@ export interface QbsTableProps {
113
113
  };
114
114
  rowExpandedHeight?: number;
115
115
  renderSortIcon?: (sortType?: 'desc' | 'asc') => React.ReactNode;
116
+ renderEmpty?: (info: React.ReactNode) => React.ReactNode;
117
+ emptySubTitle?: string;
118
+ emptyTitle?: string;
116
119
  }
117
120
  export interface QbsTableToolbarProps {
118
121
  title?: string;
package/lib/qbsTable/utilities/empty.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import React from 'react';
2
+ type props = {
3
+ title?: string;
4
+ subtitle?: string;
5
+ };
6
+ declare const NoData: React.FC<props>;
7
+ export default NoData;
package/lib/qbsTable/utilities/empty.js ADDED
@@ -0,0 +1,85 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ exports.__esModule = true;
5
+ exports["default"] = void 0;
6
+ var _react = _interopRequireDefault(require("react"));
7
+ var NoData = function NoData(_ref) {
8
+ var title = _ref.title,
9
+ subtitle = _ref.subtitle;
10
+ return /*#__PURE__*/_react["default"].createElement("div", {
11
+ style: {
12
+ display: 'flex',
13
+ flexDirection: 'column',
14
+ justifyContent: 'center',
15
+ alignItems: 'center',
16
+ justifyItems: 'center',
17
+ height: 'inherit'
18
+ }
19
+ }, /*#__PURE__*/_react["default"].createElement("div", {
20
+ style: {
21
+ width: 145,
22
+ marginBottom: 20
23
+ },
24
+ className: "nodata-img"
25
+ }, /*#__PURE__*/_react["default"].createElement("svg", {
26
+ xmlns: "http://www.w3.org/2000/svg",
27
+ width: "148",
28
+ height: "132",
29
+ fill: "none",
30
+ viewBox: "0 0 148 132"
31
+ }, /*#__PURE__*/_react["default"].createElement("circle", {
32
+ cx: "73.892",
33
+ cy: "65.924",
34
+ r: "63.212",
35
+ fill: "#717171",
36
+ fillOpacity: "0.08"
37
+ }), /*#__PURE__*/_react["default"].createElement("circle", {
38
+ cx: "73.892",
39
+ cy: "65.924",
40
+ r: "43.906",
41
+ fill: "#717171",
42
+ fillOpacity: "0.08"
43
+ }), /*#__PURE__*/_react["default"].createElement("path", {
44
+ stroke: "#797979",
45
+ strokeLinecap: "round",
46
+ strokeWidth: "3",
47
+ d: "M131.023 114.985H17.539M143.03 114.985h-7.576M13.124 114.985H9.903M5.883 114.985h-.295"
48
+ }), /*#__PURE__*/_react["default"].createElement("path", {
49
+ fill: "#fff",
50
+ d: "M40.531 49.985l6.83-3.163V30.717a7.41 7.41 0 017.41-7.41h42.173a7.41 7.41 0 017.41 7.41v16.105l3.9.797 14.208 39.694v26.572H28.511V87.313l12.02-37.328z"
51
+ }), /*#__PURE__*/_react["default"].createElement("path", {
52
+ fill: "#797979",
53
+ d: "M122.101 15.104l-.661-3.529 3.529-.66.661 3.528 3.529-.661.662 3.529-3.53.661.662 3.53-3.529.66-.662-3.528-3.529.661-.661-3.53 3.529-.66z"
54
+ }), /*#__PURE__*/_react["default"].createElement("path", {
55
+ fill: "#797979",
56
+ fillRule: "evenodd",
57
+ d: "M34.535 39.728c-3.721-1.297-4.65-6.256-1.652-8.813.856-.73 1.275-.925 2.465-1.148 1.19-.223 1.651-.193 2.713.178 2.698.94 4.09 3.9 3.129 6.654-.94 2.698-3.9 4.09-6.655 3.129zm2.125-3.133c1.566-.293 1.99-2.423.651-3.279a1.812 1.812 0 00-2.772 1.882c.191 1.018 1.066 1.595 2.12 1.397z",
58
+ clipRule: "evenodd"
59
+ }), /*#__PURE__*/_react["default"].createElement("path", {
60
+ fill: "#797979",
61
+ d: "M23.724 55.458l-.662-3.53 3.53-.66.66 3.529 3.53-.662.661 3.53-3.529.66.661 3.53-3.529.661-.661-3.529-3.53.661-.66-3.529 3.529-.661z"
62
+ }), /*#__PURE__*/_react["default"].createElement("path", {
63
+ fill: "#797979",
64
+ fillRule: "evenodd",
65
+ d: "M124.745 63.007c-3.722-1.297-4.651-6.256-1.652-8.813.856-.73 1.275-.924 2.465-1.147 1.19-.223 1.651-.193 2.713.177 2.698.94 4.089 3.9 3.128 6.655-.94 2.698-3.899 4.089-6.654 3.128zm2.124-3.133c1.566-.293 1.99-2.423.652-3.278a1.812 1.812 0 00-2.772 1.881c.191 1.018 1.066 1.595 2.12 1.398z",
66
+ clipRule: "evenodd"
67
+ }), /*#__PURE__*/_react["default"].createElement("path", {
68
+ fill: "#797979",
69
+ d: "M35.445 101.667a1.39 1.39 0 100 2.779h6.431a1.39 1.39 0 000-2.779h-6.43zM34.056 107.693a1.39 1.39 0 011.39-1.389h6.43a1.39 1.39 0 110 2.779h-6.43a1.39 1.39 0 01-1.39-1.39zM65.058 105.062a1.39 1.39 0 10-2.78 0v1.678a3.242 3.242 0 003.243 3.242h17.227a3.242 3.242 0 003.242-3.242v-1.678a1.39 1.39 0 10-2.779 0v1.678a.463.463 0 01-.463.463H65.52a.463.463 0 01-.463-.463v-1.678z"
70
+ }), /*#__PURE__*/_react["default"].createElement("path", {
71
+ fill: "#797979",
72
+ fillRule: "evenodd",
73
+ d: "M44.321 45.9c-1.212 0-2.228.253-3.028.826-.807.577-1.225 1.358-1.47 2.074l-.002.008-12.783 38.794v25.168c-.092.782.239 1.635 1.017 2.239.79.614 1.951.915 3.476.915h88.966l.081-.01c1.382-.162 3.111-1.507 3.111-4.372V87.599l-13.186-39.527-.041-.083c-.456-.932-1.647-2.09-3.771-2.09h-1.582v-.072a.926.926 0 00-1.852 0v1.777a.926.926 0 001.224.878v.196h2.21c.519 0 .822.133.992.243a.914.914 0 01.254.24l12.531 37.564h-7.241v-5.612a6.93 6.93 0 00-2.321-5.183c.033-.119.051-.245.051-.374v-8.66a6.949 6.949 0 00-5.848-6.86v-.88a.926.926 0 00-1.852 0v.794H48.291v-.794a.926.926 0 00-1.852 0v.802a6.947 6.947 0 00-6.605 6.939v8.659c0 .13.018.255.051.374a6.93 6.93 0 00-2.32 5.183v5.612h-7.312l12.202-37.032c.132-.383.279-.581.456-.708.184-.132.572-.307 1.41-.307h2.824v-.174a.926.926 0 001.146-.9v-1.777a.926.926 0 10-1.852 0v.072H44.32zm-1.708 28.529a6.952 6.952 0 011.898-.263h61.769a6.95 6.95 0 011.898.263v-7.532a4.168 4.168 0 00-4.168-4.169H46.781a4.168 4.168 0 00-4.168 4.169v7.531zm67.835 6.684v5.612h-8.946c-1.136 0-2.19.595-2.776 1.569l-4.84 8.031a.463.463 0 01-.397.224H56.656a.463.463 0 01-.391-.215l-5.127-8.1a3.242 3.242 0 00-2.74-1.509h-8.055v-5.612a4.168 4.168 0 014.168-4.168h61.769a4.168 4.168 0 014.168 4.168zm10.462 8.391h-19.408a.461.461 0 00-.396.224l-4.84 8.031a3.242 3.242 0 01-2.778 1.569H56.657a3.242 3.242 0 01-2.74-1.508l-5.126-8.1a.463.463 0 00-.392-.216h-18.58v23.348c.172.102.648.293 1.713.293h88.742a.715.715 0 00.262-.203c.145-.171.375-.565.375-1.4V89.504z",
74
+ clipRule: "evenodd"
75
+ }), /*#__PURE__*/_react["default"].createElement("path", {
76
+ fill: "#797979",
77
+ d: "M47.365 57.417a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 57.417a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 52.974a.926.926 0 00.926-.927V50.27a.926.926 0 00-1.852 0v1.777c0 .512.415.927.926.927zM104.183 52.974a.926.926 0 00.926-.927V50.27a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 44.088a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 44.088a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 39.645a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 39.645a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 35.202a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 35.202a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 30.758a.926.926 0 00.926-.926v-.888c0-.248.02-.49.057-.726a.926.926 0 00-1.83-.288c-.052.33-.08.67-.08 1.014v.888c0 .512.416.926.927.926zM104.183 30.758a.926.926 0 00.926-.926v-.888c0-.345-.027-.683-.079-1.014a.926.926 0 10-1.83.288c.037.236.057.478.057.726v.888c0 .512.414.926.926.926zM47.881 26.426a.926.926 0 001.294-.204c.286-.394.633-.74 1.026-1.026a.926.926 0 00-1.09-1.498c-.55.4-1.034.884-1.434 1.434a.926.926 0 00.204 1.294zM103.667 26.426a.926.926 0 00.204-1.294 6.509 6.509 0 00-1.434-1.434.926.926 0 00-1.09 1.498c.393.286.74.632 1.026 1.026a.926.926 0 001.294.204zM51.138 23.597c.08.506.554.851 1.059.772a4.67 4.67 0 01.726-.057h.914a.926.926 0 000-1.852h-.914c-.344 0-.683.026-1.014.078a.926.926 0 00-.77 1.06zM100.41 23.597a.927.927 0 00-.771-1.059 6.522 6.522 0 00-1.014-.078h-.914a.926.926 0 100 1.852h.914c.248 0 .49.02.726.057a.926.926 0 001.059-.772zM55.653 23.386c0 .511.415.926.926.926h1.828a.926.926 0 000-1.852H56.58a.926.926 0 00-.926.926zM60.223 23.386c0 .511.415.926.926.926h1.828a.926.926 0 000-1.852H61.15a.926.926 0 00-.926.926zM64.793 23.386c0 .511.415.926.926.926h1.829a.926.926 0 000-1.852h-1.829a.926.926 0 00-.926.926zM69.364 23.386c0 .511.414.926.926.926h1.828a.926.926 0 000-1.852H70.29a.926.926 0 00-.927.926zM73.934 23.386c0 .511.414.926.926.926h1.828a.926.926 0 000-1.852H74.86a.926.926 0 00-.926.926zM78.504 23.386c0 .511.415.926.926.926h1.828a.926.926 0 000-1.852H79.43a.926.926 0 00-.926.926zM83.074 23.386c0 .511.415.926.927.926h1.828a.926.926 0 000-1.852H84a.926.926 0 00-.927.926zM87.644 23.386c0 .511.415.926.927.926h1.828a.926.926 0 000-1.852H88.57a.926.926 0 00-.927.926zM92.215 23.386c0 .511.414.926.926.926h1.828a.926.926 0 000-1.852h-1.828a.926.926 0 00-.926.926zM72.178 36.453a1.39 1.39 0 10-1.965 1.965l3.797 3.797-3.797 3.798a1.39 1.39 0 001.965 1.965l3.797-3.798 3.798 3.798a1.39 1.39 0 001.965-1.965l-3.798-3.798 3.798-3.797a1.39 1.39 0 10-1.965-1.965l-3.798 3.797-3.797-3.797z"
78
+ })), ' '), /*#__PURE__*/_react["default"].createElement("p", {
79
+ className: "text-center text-common font-bold text-blackAlt nodata-title"
80
+ }, title), /*#__PURE__*/_react["default"].createElement("span", {
81
+ className: "text-xxs font-medium text-grey-medium nodata-sub-title"
82
+ }, subtitle));
83
+ };
84
+ var _default = NoData;
85
+ exports["default"] = _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "qbs-react-grid",
3
- "version": "1.1.50",
3
+ "version": "1.1.52",
4
4
  "description": "A React table component",
5
5
  "main": "lib/index.js",
6
6
  "typings": "lib/index.d.ts",
package/src/qbsTable/QbsTable.tsx CHANGED
@@ -23,6 +23,7 @@ import { SettingsIcon } from './utilities/icons';
23
23
  // import 'qbs-react-table/dist/css/qbs-react-grid.css';
24
24
 
25
25
  import '../../dist/css/qbs-react-grid.css';
26
+ import NoData from './utilities/empty';
26
27
 
27
28
  const CHECKBOX_LINE_HEIGHT = '36px';
28
29
  const COLUMN_WIDTH = 250;
@@ -77,7 +78,10 @@ const QbsTable: React.FC<QbsTableProps> = ({
77
78
  rowExpandedHeight = 317,
78
79
  renderSortIcon,
79
80
  tableKey = 'parent',
80
- autoHeight
81
+ renderEmpty,
82
+ autoHeight,
83
+ emptySubTitle,
84
+ emptyTitle
81
85
  }) => {
82
86
  const [loading, setLoading] = useState(false);
83
87
  const [columns, setColumns] = useState(propColumn);
@@ -449,6 +453,16 @@ const QbsTable: React.FC<QbsTableProps> = ({
449
453
  tableBodyHeight={tableBodyHeight}
450
454
  cellBordered={cellBordered}
451
455
  bordered={bordered}
456
+ renderEmpty={(info: React.ReactNode) =>
457
+ renderEmpty ? (
458
+ renderEmpty(info)
459
+ ) : (
460
+ <NoData
461
+ title={emptyTitle ?? 'No Data Found'}
462
+ subtitle={emptySubTitle ?? 'No Data Found'}
463
+ />
464
+ )
465
+ }
452
466
  columns={columns}
453
467
  minHeight={minHeight}
454
468
  headerHeight={headerHeight}
package/src/qbsTable/commontypes.ts CHANGED
@@ -116,6 +116,9 @@ export interface QbsTableProps {
116
116
  };
117
117
  rowExpandedHeight?: number;
118
118
  renderSortIcon?: (sortType?: 'desc' | 'asc') => React.ReactNode;
119
+ renderEmpty?: (info: React.ReactNode) => React.ReactNode;
120
+ emptySubTitle?: string;
121
+ emptyTitle?: string;
119
122
  }
120
123
 
121
124
  export interface QbsTableToolbarProps {
package/src/qbsTable/utilities/empty.tsx ADDED
@@ -0,0 +1,82 @@
1
+ import React from 'react';
2
+
3
+ type props = {
4
+ title?: string;
5
+ subtitle?: string;
6
+ };
7
+
8
+ const NoData: React.FC<props> = ({ title, subtitle }) => {
9
+ return (
10
+ <div
11
+ style={{
12
+ display: 'flex',
13
+ flexDirection: 'column',
14
+ justifyContent: 'center',
15
+ alignItems: 'center',
16
+ justifyItems: 'center',
17
+ height: 'inherit'
18
+ }}
19
+ >
20
+ <div style={{ width: 145, marginBottom: 20 }} className="nodata-img">
21
+ <svg
22
+ xmlns="http://www.w3.org/2000/svg"
23
+ width="148"
24
+ height="132"
25
+ fill="none"
26
+ viewBox="0 0 148 132"
27
+ >
28
+ <circle cx="73.892" cy="65.924" r="63.212" fill="#717171" fillOpacity="0.08"></circle>
29
+ <circle cx="73.892" cy="65.924" r="43.906" fill="#717171" fillOpacity="0.08"></circle>
30
+ <path
31
+ stroke="#797979"
32
+ strokeLinecap="round"
33
+ strokeWidth="3"
34
+ d="M131.023 114.985H17.539M143.03 114.985h-7.576M13.124 114.985H9.903M5.883 114.985h-.295"
35
+ ></path>
36
+ <path
37
+ fill="#fff"
38
+ d="M40.531 49.985l6.83-3.163V30.717a7.41 7.41 0 017.41-7.41h42.173a7.41 7.41 0 017.41 7.41v16.105l3.9.797 14.208 39.694v26.572H28.511V87.313l12.02-37.328z"
39
+ ></path>
40
+ <path
41
+ fill="#797979"
42
+ d="M122.101 15.104l-.661-3.529 3.529-.66.661 3.528 3.529-.661.662 3.529-3.53.661.662 3.53-3.529.66-.662-3.528-3.529.661-.661-3.53 3.529-.66z"
43
+ ></path>
44
+ <path
45
+ fill="#797979"
46
+ fillRule="evenodd"
47
+ d="M34.535 39.728c-3.721-1.297-4.65-6.256-1.652-8.813.856-.73 1.275-.925 2.465-1.148 1.19-.223 1.651-.193 2.713.178 2.698.94 4.09 3.9 3.129 6.654-.94 2.698-3.9 4.09-6.655 3.129zm2.125-3.133c1.566-.293 1.99-2.423.651-3.279a1.812 1.812 0 00-2.772 1.882c.191 1.018 1.066 1.595 2.12 1.397z"
48
+ clipRule="evenodd"
49
+ ></path>
50
+ <path
51
+ fill="#797979"
52
+ d="M23.724 55.458l-.662-3.53 3.53-.66.66 3.529 3.53-.662.661 3.53-3.529.66.661 3.53-3.529.661-.661-3.529-3.53.661-.66-3.529 3.529-.661z"
53
+ ></path>
54
+ <path
55
+ fill="#797979"
56
+ fillRule="evenodd"
57
+ d="M124.745 63.007c-3.722-1.297-4.651-6.256-1.652-8.813.856-.73 1.275-.924 2.465-1.147 1.19-.223 1.651-.193 2.713.177 2.698.94 4.089 3.9 3.128 6.655-.94 2.698-3.899 4.089-6.654 3.128zm2.124-3.133c1.566-.293 1.99-2.423.652-3.278a1.812 1.812 0 00-2.772 1.881c.191 1.018 1.066 1.595 2.12 1.398z"
58
+ clipRule="evenodd"
59
+ ></path>
60
+ <path
61
+ fill="#797979"
62
+ d="M35.445 101.667a1.39 1.39 0 100 2.779h6.431a1.39 1.39 0 000-2.779h-6.43zM34.056 107.693a1.39 1.39 0 011.39-1.389h6.43a1.39 1.39 0 110 2.779h-6.43a1.39 1.39 0 01-1.39-1.39zM65.058 105.062a1.39 1.39 0 10-2.78 0v1.678a3.242 3.242 0 003.243 3.242h17.227a3.242 3.242 0 003.242-3.242v-1.678a1.39 1.39 0 10-2.779 0v1.678a.463.463 0 01-.463.463H65.52a.463.463 0 01-.463-.463v-1.678z"
63
+ ></path>
64
+ <path
65
+ fill="#797979"
66
+ fillRule="evenodd"
67
+ d="M44.321 45.9c-1.212 0-2.228.253-3.028.826-.807.577-1.225 1.358-1.47 2.074l-.002.008-12.783 38.794v25.168c-.092.782.239 1.635 1.017 2.239.79.614 1.951.915 3.476.915h88.966l.081-.01c1.382-.162 3.111-1.507 3.111-4.372V87.599l-13.186-39.527-.041-.083c-.456-.932-1.647-2.09-3.771-2.09h-1.582v-.072a.926.926 0 00-1.852 0v1.777a.926.926 0 001.224.878v.196h2.21c.519 0 .822.133.992.243a.914.914 0 01.254.24l12.531 37.564h-7.241v-5.612a6.93 6.93 0 00-2.321-5.183c.033-.119.051-.245.051-.374v-8.66a6.949 6.949 0 00-5.848-6.86v-.88a.926.926 0 00-1.852 0v.794H48.291v-.794a.926.926 0 00-1.852 0v.802a6.947 6.947 0 00-6.605 6.939v8.659c0 .13.018.255.051.374a6.93 6.93 0 00-2.32 5.183v5.612h-7.312l12.202-37.032c.132-.383.279-.581.456-.708.184-.132.572-.307 1.41-.307h2.824v-.174a.926.926 0 001.146-.9v-1.777a.926.926 0 10-1.852 0v.072H44.32zm-1.708 28.529a6.952 6.952 0 011.898-.263h61.769a6.95 6.95 0 011.898.263v-7.532a4.168 4.168 0 00-4.168-4.169H46.781a4.168 4.168 0 00-4.168 4.169v7.531zm67.835 6.684v5.612h-8.946c-1.136 0-2.19.595-2.776 1.569l-4.84 8.031a.463.463 0 01-.397.224H56.656a.463.463 0 01-.391-.215l-5.127-8.1a3.242 3.242 0 00-2.74-1.509h-8.055v-5.612a4.168 4.168 0 014.168-4.168h61.769a4.168 4.168 0 014.168 4.168zm10.462 8.391h-19.408a.461.461 0 00-.396.224l-4.84 8.031a3.242 3.242 0 01-2.778 1.569H56.657a3.242 3.242 0 01-2.74-1.508l-5.126-8.1a.463.463 0 00-.392-.216h-18.58v23.348c.172.102.648.293 1.713.293h88.742a.715.715 0 00.262-.203c.145-.171.375-.565.375-1.4V89.504z"
68
+ clipRule="evenodd"
69
+ ></path>
70
+ <path
71
+ fill="#797979"
72
+ d="M47.365 57.417a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 57.417a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 52.974a.926.926 0 00.926-.927V50.27a.926.926 0 00-1.852 0v1.777c0 .512.415.927.926.927zM104.183 52.974a.926.926 0 00.926-.927V50.27a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 44.088a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 44.088a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 39.645a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 39.645a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 35.202a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 35.202a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 30.758a.926.926 0 00.926-.926v-.888c0-.248.02-.49.057-.726a.926.926 0 00-1.83-.288c-.052.33-.08.67-.08 1.014v.888c0 .512.416.926.927.926zM104.183 30.758a.926.926 0 00.926-.926v-.888c0-.345-.027-.683-.079-1.014a.926.926 0 10-1.83.288c.037.236.057.478.057.726v.888c0 .512.414.926.926.926zM47.881 26.426a.926.926 0 001.294-.204c.286-.394.633-.74 1.026-1.026a.926.926 0 00-1.09-1.498c-.55.4-1.034.884-1.434 1.434a.926.926 0 00.204 1.294zM103.667 26.426a.926.926 0 00.204-1.294 6.509 6.509 0 00-1.434-1.434.926.926 0 00-1.09 1.498c.393.286.74.632 1.026 1.026a.926.926 0 001.294.204zM51.138 23.597c.08.506.554.851 1.059.772a4.67 4.67 0 01.726-.057h.914a.926.926 0 000-1.852h-.914c-.344 0-.683.026-1.014.078a.926.926 0 00-.77 1.06zM100.41 23.597a.927.927 0 00-.771-1.059 6.522 6.522 0 00-1.014-.078h-.914a.926.926 0 100 1.852h.914c.248 0 .49.02.726.057a.926.926 0 001.059-.772zM55.653 23.386c0 .511.415.926.926.926h1.828a.926.926 0 000-1.852H56.58a.926.926 0 00-.926.926zM60.223 23.386c0 .511.415.926.926.926h1.828a.926.926 0 000-1.852H61.15a.926.926 0 00-.926.926zM64.793 23.386c0 .511.415.926.926.926h1.829a.926.926 0 000-1.852h-1.829a.926.926 0 00-.926.926zM69.364 23.386c0 .511.414.926.926.926h1.828a.926.926 0 000-1.852H70.29a.926.926 0 00-.927.926zM73.934 23.386c0 .511.414.926.926.926h1.828a.926.926 0 000-1.852H74.86a.926.926 0 00-.926.926zM78.504 23.386c0 .511.415.926.926.926h1.828a.926.926 0 000-1.852H79.43a.926.926 0 00-.926.926zM83.074 23.386c0 .511.415.926.927.926h1.828a.926.926 0 000-1.852H84a.926.926 0 00-.927.926zM87.644 23.386c0 .511.415.926.927.926h1.828a.926.926 0 000-1.852H88.57a.926.926 0 00-.927.926zM92.215 23.386c0 .511.414.926.926.926h1.828a.926.926 0 000-1.852h-1.828a.926.926 0 00-.926.926zM72.178 36.453a1.39 1.39 0 10-1.965 1.965l3.797 3.797-3.797 3.798a1.39 1.39 0 001.965 1.965l3.797-3.798 3.798 3.798a1.39 1.39 0 001.965-1.965l-3.798-3.798 3.798-3.797a1.39 1.39 0 10-1.965-1.965l-3.798 3.797-3.797-3.797z"
73
+ ></path>
74
+ </svg>{' '}
75
+ </div>
76
+ <p className="text-center text-common font-bold text-blackAlt nodata-title">{title}</p>
77
+ <span className="text-xxs font-medium text-grey-medium nodata-sub-title">{subtitle}</span>
78
+ </div>
79
+ );
80
+ };
81
+
82
+ export default NoData;