qbs-react-grid 1.3.3 → 1.3.5

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 (7) hide show
  1. package/es/qbsTable/QbsTable.js +8 -3
  2. package/es/qbsTable/utilities/CardComponent.js +2 -2
  3. package/lib/qbsTable/QbsTable.js +8 -3
  4. package/lib/qbsTable/utilities/CardComponent.js +2 -2
  5. package/package.json +1 -1
  6. package/src/qbsTable/QbsTable.tsx +8 -9
  7. package/src/qbsTable/utilities/CardComponent.tsx +8 -2
package/es/qbsTable/QbsTable.js CHANGED
@@ -9,6 +9,7 @@ import Table from '../Table';
9
9
  import { ActionCell, CheckCell, CustomRowStatus, CustomTableCell, ExpandCell } from './CustomTableCell';
10
10
  import ToolBar from './Toolbar';
11
11
  import CardComponent from './utilities/CardComponent';
12
+ import CardLoader from './utilities/CardLoader';
12
13
  import ColumToggle from './utilities/ColumShowHide';
13
14
  import debounce from './utilities/debounce';
14
15
  import { deepEqual } from './utilities/deepEqual';
@@ -18,7 +19,6 @@ import { SettingsIcon } from './utilities/icons';
18
19
  // import 'qbs-react-table/dist/css/qbs-react-grid.css';
19
20
 
20
21
  import '../../dist/css/qbs-react-grid.css';
21
- import CardLoader from './utilities/CardLoader';
22
22
  var CHECKBOX_LINE_HEIGHT = '36px';
23
23
  var COLUMN_WIDTH = 250;
24
24
  var QbsTable = function QbsTable(_ref) {
@@ -97,7 +97,7 @@ var QbsTable = function QbsTable(_ref) {
97
97
  _ref$tableView = _ref.tableView,
98
98
  tableView = _ref$tableView === void 0 ? true : _ref$tableView,
99
99
  _ref$enableTableToggl = _ref.enableTableToggle,
100
- enableTableToggle = _ref$enableTableToggl === void 0 ? true : _ref$enableTableToggl,
100
+ enableTableToggle = _ref$enableTableToggl === void 0 ? false : _ref$enableTableToggl,
101
101
  _ref$cardColumLimit = _ref.cardColumLimit,
102
102
  cardColumLimit = _ref$cardColumLimit === void 0 ? 5 : _ref$cardColumLimit,
103
103
  _ref$childDetailHeadi = _ref.childDetailHeading,
@@ -580,7 +580,12 @@ var QbsTable = function QbsTable(_ref) {
580
580
  maxHeight: !tableViewToggle ? height : '',
581
581
  minHeight: !tableViewToggle ? height : ''
582
582
  }
583
- }, isLoading ? /*#__PURE__*/React.createElement("div", {
583
+ }, ((data === null || data === void 0 ? void 0 : data.length) === 0 || !data) && !isLoading && /*#__PURE__*/React.createElement("div", {
584
+ className: "flex flex-col gap-2 p-2 "
585
+ }, /*#__PURE__*/React.createElement(NoData, {
586
+ title: emptyTitle != null ? emptyTitle : 'No Data Found',
587
+ subtitle: emptySubTitle
588
+ })), isLoading ? /*#__PURE__*/React.createElement("div", {
584
589
  className: "flex flex-col gap-2 p-2"
585
590
  }, /*#__PURE__*/React.createElement(CardLoader, null)) : data.map(function (items) {
586
591
  return /*#__PURE__*/React.createElement("div", {
package/es/qbsTable/utilities/CardComponent.js CHANGED
@@ -38,7 +38,7 @@ var CardComponent = function CardComponent(_ref) {
38
38
  }, /*#__PURE__*/React.createElement("p", {
39
39
  className: " text-grey qbs-card-column-title "
40
40
  }, col.title), col.customCell || col.link ? /*#__PURE__*/React.createElement("span", {
41
- className: "qbs-card-column-content mt-1 " + (!viewMore ? 'line-clamp-1' : '')
41
+ className: "qbs-card-column-content mt-1 font-semibold " + (!viewMore ? 'line-clamp-1' : '')
42
42
  }, /*#__PURE__*/React.createElement(CustomTableCell, {
43
43
  dataKey: col.field,
44
44
  rowData: data,
@@ -49,7 +49,7 @@ var CardComponent = function CardComponent(_ref) {
49
49
  rowClick: col.rowClick,
50
50
  renderCell: col.renderCell
51
51
  })) : /*#__PURE__*/React.createElement("p", {
52
- className: "mt-1 qbs-card-column-content " + (!viewMore ? 'line-clamp-1' : ''),
52
+ className: "mt-1 qbs-card-column-content font-semibold " + (!viewMore ? 'line-clamp-1' : ''),
53
53
  key: index
54
54
  }, handleCellFormat(data[col.field], col.type)));
55
55
  }), /*#__PURE__*/React.createElement("div", {
package/lib/qbsTable/QbsTable.js CHANGED
@@ -14,13 +14,13 @@ var _Table = _interopRequireDefault(require("../Table"));
14
14
  var _CustomTableCell = require("./CustomTableCell");
15
15
  var _Toolbar = _interopRequireDefault(require("./Toolbar"));
16
16
  var _CardComponent = _interopRequireDefault(require("./utilities/CardComponent"));
17
+ var _CardLoader = _interopRequireDefault(require("./utilities/CardLoader"));
17
18
  var _ColumShowHide = _interopRequireDefault(require("./utilities/ColumShowHide"));
18
19
  var _debounce = _interopRequireDefault(require("./utilities/debounce"));
19
20
  var _deepEqual = require("./utilities/deepEqual");
20
21
  var _empty = _interopRequireDefault(require("./utilities/empty"));
21
22
  var _icons = require("./utilities/icons");
22
23
  require("../../dist/css/qbs-react-grid.css");
23
- var _CardLoader = _interopRequireDefault(require("./utilities/CardLoader"));
24
24
  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); }
25
25
  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; }
26
26
  // import 'qbs-react-table/dist/css/qbs-react-grid.css';
@@ -103,7 +103,7 @@ var QbsTable = function QbsTable(_ref) {
103
103
  _ref$tableView = _ref.tableView,
104
104
  tableView = _ref$tableView === void 0 ? true : _ref$tableView,
105
105
  _ref$enableTableToggl = _ref.enableTableToggle,
106
- enableTableToggle = _ref$enableTableToggl === void 0 ? true : _ref$enableTableToggl,
106
+ enableTableToggle = _ref$enableTableToggl === void 0 ? false : _ref$enableTableToggl,
107
107
  _ref$cardColumLimit = _ref.cardColumLimit,
108
108
  cardColumLimit = _ref$cardColumLimit === void 0 ? 5 : _ref$cardColumLimit,
109
109
  _ref$childDetailHeadi = _ref.childDetailHeading,
@@ -586,7 +586,12 @@ var QbsTable = function QbsTable(_ref) {
586
586
  maxHeight: !tableViewToggle ? height : '',
587
587
  minHeight: !tableViewToggle ? height : ''
588
588
  }
589
- }, isLoading ? /*#__PURE__*/_react["default"].createElement("div", {
589
+ }, ((data === null || data === void 0 ? void 0 : data.length) === 0 || !data) && !isLoading && /*#__PURE__*/_react["default"].createElement("div", {
590
+ className: "flex flex-col gap-2 p-2 "
591
+ }, /*#__PURE__*/_react["default"].createElement(_empty["default"], {
592
+ title: emptyTitle != null ? emptyTitle : 'No Data Found',
593
+ subtitle: emptySubTitle
594
+ })), isLoading ? /*#__PURE__*/_react["default"].createElement("div", {
590
595
  className: "flex flex-col gap-2 p-2"
591
596
  }, /*#__PURE__*/_react["default"].createElement(_CardLoader["default"], null)) : data.map(function (items) {
592
597
  return /*#__PURE__*/_react["default"].createElement("div", {
package/lib/qbsTable/utilities/CardComponent.js CHANGED
@@ -45,7 +45,7 @@ var CardComponent = function CardComponent(_ref) {
45
45
  }, /*#__PURE__*/_react["default"].createElement("p", {
46
46
  className: " text-grey qbs-card-column-title "
47
47
  }, col.title), col.customCell || col.link ? /*#__PURE__*/_react["default"].createElement("span", {
48
- className: "qbs-card-column-content mt-1 " + (!viewMore ? 'line-clamp-1' : '')
48
+ className: "qbs-card-column-content mt-1 font-semibold " + (!viewMore ? 'line-clamp-1' : '')
49
49
  }, /*#__PURE__*/_react["default"].createElement(_SwitchCardColumns.CustomTableCell, {
50
50
  dataKey: col.field,
51
51
  rowData: data,
@@ -56,7 +56,7 @@ var CardComponent = function CardComponent(_ref) {
56
56
  rowClick: col.rowClick,
57
57
  renderCell: col.renderCell
58
58
  })) : /*#__PURE__*/_react["default"].createElement("p", {
59
- className: "mt-1 qbs-card-column-content " + (!viewMore ? 'line-clamp-1' : ''),
59
+ className: "mt-1 qbs-card-column-content font-semibold " + (!viewMore ? 'line-clamp-1' : ''),
60
60
  key: index
61
61
  }, (0, _handleFormatCell.handleCellFormat)(data[col.field], col.type)));
62
62
  }), /*#__PURE__*/_react["default"].createElement("div", {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "qbs-react-grid",
3
- "version": "1.3.3",
3
+ "version": "1.3.5",
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
@@ -7,15 +7,10 @@ import HeaderCell from '../HeaderCell';
7
7
  import Pagination from '../Pagination';
8
8
  import Table from '../Table';
9
9
  import { QbsColumnProps, QbsTableProps } from './commontypes';
10
- import {
11
- ActionCell,
12
- CheckCell,
13
- CustomRowStatus,
14
- CustomTableCell,
15
- ExpandCell
16
- } from './CustomTableCell';
10
+ import { ActionCell, CheckCell, CustomRowStatus, CustomTableCell, ExpandCell } from './CustomTableCell';
17
11
  import ToolBar from './Toolbar';
18
12
  import CardComponent from './utilities/CardComponent';
13
+ import CardLoader from './utilities/CardLoader';
19
14
  import ColumToggle from './utilities/ColumShowHide';
20
15
  import debounce from './utilities/debounce';
21
16
  import { deepEqual } from './utilities/deepEqual';
@@ -25,7 +20,6 @@ import { SettingsIcon } from './utilities/icons';
25
20
  // import 'qbs-react-table/dist/css/qbs-react-grid.css';
26
21
 
27
22
  import '../../dist/css/qbs-react-grid.css';
28
- import CardLoader from './utilities/CardLoader';
29
23
 
30
24
  const CHECKBOX_LINE_HEIGHT = '36px';
31
25
  const COLUMN_WIDTH = 250;
@@ -85,7 +79,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
85
79
  emptySubTitle,
86
80
  emptyTitle,
87
81
  tableView = true,
88
- enableTableToggle = true,
82
+ enableTableToggle = false,
89
83
  cardColumLimit = 5,
90
84
  childDetailHeading = ''
91
85
  }) => {
@@ -640,6 +634,11 @@ const QbsTable: React.FC<QbsTableProps> = ({
640
634
  minHeight: !tableViewToggle ? height : ''
641
635
  }}
642
636
  >
637
+ {(data?.length === 0 || !data) && !isLoading && (
638
+ <div className="flex flex-col gap-2 p-2 ">
639
+ <NoData title={emptyTitle ?? 'No Data Found'} subtitle={emptySubTitle} />
640
+ </div>
641
+ )}
643
642
  {isLoading ? (
644
643
  <div className="flex flex-col gap-2 p-2">
645
644
  <CardLoader />
package/src/qbsTable/utilities/CardComponent.tsx CHANGED
@@ -55,7 +55,11 @@ const CardComponent: React.FC<Props> = ({
55
55
  >
56
56
  <p className=" text-grey qbs-card-column-title ">{col.title}</p>
57
57
  {col.customCell || col.link ? (
58
- <span className={`qbs-card-column-content mt-1 ${!viewMore ? 'line-clamp-1' : ''}`}>
58
+ <span
59
+ className={`qbs-card-column-content mt-1 font-semibold ${
60
+ !viewMore ? 'line-clamp-1' : ''
61
+ }`}
62
+ >
59
63
  <CustomTableCell
60
64
  dataKey={col.field}
61
65
  rowData={data}
@@ -69,7 +73,9 @@ const CardComponent: React.FC<Props> = ({
69
73
  </span>
70
74
  ) : (
71
75
  <p
72
- className={`mt-1 qbs-card-column-content ${!viewMore ? 'line-clamp-1' : ''}`}
76
+ className={`mt-1 qbs-card-column-content font-semibold ${
77
+ !viewMore ? 'line-clamp-1' : ''
78
+ }`}
73
79
  key={index}
74
80
  >
75
81
  {handleCellFormat(data[col.field], col.type as string)}