qbs-react-grid 1.3.6 → 1.3.8

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 -4
  2. package/es/qbsTable/commontypes.d.ts +2 -0
  3. package/lib/qbsTable/QbsTable.js +8 -4
  4. package/lib/qbsTable/commontypes.d.ts +2 -0
  5. package/package.json +1 -1
  6. package/src/qbsTable/QbsTable.tsx +20 -11
  7. package/src/qbsTable/commontypes.ts +2 -0
package/es/qbsTable/QbsTable.js CHANGED
@@ -101,7 +101,10 @@ var QbsTable = function QbsTable(_ref) {
101
101
  _ref$cardColumLimit = _ref.cardColumLimit,
102
102
  cardColumLimit = _ref$cardColumLimit === void 0 ? 5 : _ref$cardColumLimit,
103
103
  _ref$childDetailHeadi = _ref.childDetailHeading,
104
- childDetailHeading = _ref$childDetailHeadi === void 0 ? '' : _ref$childDetailHeadi;
104
+ childDetailHeading = _ref$childDetailHeadi === void 0 ? '' : _ref$childDetailHeadi,
105
+ _ref$isCustomTableCar = _ref.isCustomTableCardView,
106
+ isCustomTableCardView = _ref$isCustomTableCar === void 0 ? false : _ref$isCustomTableCar,
107
+ handleTableCardView = _ref.handleTableCardView;
105
108
  var _useState = useState(false),
106
109
  loading = _useState[0],
107
110
  setLoading = _useState[1];
@@ -574,7 +577,7 @@ var QbsTable = function QbsTable(_ref) {
574
577
  handleMenuActions: handleMenuActions,
575
578
  dataTheme: dataTheme
576
579
  }))) : /*#__PURE__*/React.createElement("div", {
577
- className: " p-2",
580
+ className: isCustomTableCardView ? 'qbs-card-wrapper' : ' p-2',
578
581
  style: {
579
582
  overflow: !tableViewToggle ? 'auto' : '',
580
583
  maxHeight: !tableViewToggle ? height : '',
@@ -588,10 +591,11 @@ var QbsTable = function QbsTable(_ref) {
588
591
  })), isLoading ? /*#__PURE__*/React.createElement("div", {
589
592
  className: "flex flex-col gap-2 p-2"
590
593
  }, /*#__PURE__*/React.createElement(CardLoader, null)) : data.map(function (items) {
594
+ var _handleTableCardView;
591
595
  return /*#__PURE__*/React.createElement("div", {
592
- className: "flex flex-col gap-3 p-2",
596
+ className: isCustomTableCardView ? 'qbs-card-single' : 'flex flex-col gap-3 p-2',
593
597
  key: items === null || items === void 0 ? void 0 : items.id
594
- }, /*#__PURE__*/React.createElement(CardComponent, {
598
+ }, isCustomTableCardView ? (_handleTableCardView = handleTableCardView === null || handleTableCardView === void 0 ? void 0 : handleTableCardView(items)) != null ? _handleTableCardView : /*#__PURE__*/React.createElement(React.Fragment, null) : /*#__PURE__*/React.createElement(CardComponent, {
595
599
  data: items,
596
600
  cardColumLimit: cardColumLimit,
597
601
  childDetailHeading: childDetailHeading,
package/es/qbsTable/commontypes.d.ts CHANGED
@@ -124,6 +124,8 @@ export interface QbsTableProps {
124
124
  tableView?: boolean;
125
125
  cardColumLimit?: number;
126
126
  childDetailHeading?: string;
127
+ handleTableCardView?: (data: any) => React.ReactNode;
128
+ isCustomTableCardView?: boolean;
127
129
  }
128
130
  export interface QbsTableToolbarProps {
129
131
  title?: string;
package/lib/qbsTable/QbsTable.js CHANGED
@@ -107,7 +107,10 @@ var QbsTable = function QbsTable(_ref) {
107
107
  _ref$cardColumLimit = _ref.cardColumLimit,
108
108
  cardColumLimit = _ref$cardColumLimit === void 0 ? 5 : _ref$cardColumLimit,
109
109
  _ref$childDetailHeadi = _ref.childDetailHeading,
110
- childDetailHeading = _ref$childDetailHeadi === void 0 ? '' : _ref$childDetailHeadi;
110
+ childDetailHeading = _ref$childDetailHeadi === void 0 ? '' : _ref$childDetailHeadi,
111
+ _ref$isCustomTableCar = _ref.isCustomTableCardView,
112
+ isCustomTableCardView = _ref$isCustomTableCar === void 0 ? false : _ref$isCustomTableCar,
113
+ handleTableCardView = _ref.handleTableCardView;
111
114
  var _useState = (0, _react.useState)(false),
112
115
  loading = _useState[0],
113
116
  setLoading = _useState[1];
@@ -580,7 +583,7 @@ var QbsTable = function QbsTable(_ref) {
580
583
  handleMenuActions: handleMenuActions,
581
584
  dataTheme: dataTheme
582
585
  }))) : /*#__PURE__*/_react["default"].createElement("div", {
583
- className: " p-2",
586
+ className: isCustomTableCardView ? 'qbs-card-wrapper' : ' p-2',
584
587
  style: {
585
588
  overflow: !tableViewToggle ? 'auto' : '',
586
589
  maxHeight: !tableViewToggle ? height : '',
@@ -594,10 +597,11 @@ var QbsTable = function QbsTable(_ref) {
594
597
  })), isLoading ? /*#__PURE__*/_react["default"].createElement("div", {
595
598
  className: "flex flex-col gap-2 p-2"
596
599
  }, /*#__PURE__*/_react["default"].createElement(_CardLoader["default"], null)) : data.map(function (items) {
600
+ var _handleTableCardView;
597
601
  return /*#__PURE__*/_react["default"].createElement("div", {
598
- className: "flex flex-col gap-3 p-2",
602
+ className: isCustomTableCardView ? 'qbs-card-single' : 'flex flex-col gap-3 p-2',
599
603
  key: items === null || items === void 0 ? void 0 : items.id
600
- }, /*#__PURE__*/_react["default"].createElement(_CardComponent["default"], {
604
+ }, isCustomTableCardView ? (_handleTableCardView = handleTableCardView === null || handleTableCardView === void 0 ? void 0 : handleTableCardView(items)) != null ? _handleTableCardView : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null) : /*#__PURE__*/_react["default"].createElement(_CardComponent["default"], {
601
605
  data: items,
602
606
  cardColumLimit: cardColumLimit,
603
607
  childDetailHeading: childDetailHeading,
package/lib/qbsTable/commontypes.d.ts CHANGED
@@ -124,6 +124,8 @@ export interface QbsTableProps {
124
124
  tableView?: boolean;
125
125
  cardColumLimit?: number;
126
126
  childDetailHeading?: string;
127
+ handleTableCardView?: (data: any) => React.ReactNode;
128
+ isCustomTableCardView?: boolean;
127
129
  }
128
130
  export interface QbsTableToolbarProps {
129
131
  title?: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "qbs-react-grid",
3
- "version": "1.3.6",
3
+ "version": "1.3.8",
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
@@ -87,7 +87,9 @@ const QbsTable: React.FC<QbsTableProps> = ({
87
87
  tableView = true,
88
88
  enableTableToggle = false,
89
89
  cardColumLimit = 5,
90
- childDetailHeading = ''
90
+ childDetailHeading = '',
91
+ isCustomTableCardView = false,
92
+ handleTableCardView
91
93
  }) => {
92
94
  const [loading, setLoading] = useState(false);
93
95
  const [columns, setColumns] = useState(propColumn);
@@ -633,7 +635,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
633
635
  </Table>
634
636
  ) : (
635
637
  <div
636
- className=" p-2"
638
+ className={isCustomTableCardView ? 'qbs-card-wrapper' : ' p-2'}
637
639
  style={{
638
640
  overflow: !tableViewToggle ? 'auto' : '',
639
641
  maxHeight: !tableViewToggle ? height : '',
@@ -651,15 +653,22 @@ const QbsTable: React.FC<QbsTableProps> = ({
651
653
  </div>
652
654
  ) : (
653
655
  data.map((items: any) => (
654
- <div className="flex flex-col gap-3 p-2" key={items?.id}>
655
- <CardComponent
656
- data={items}
657
- cardColumLimit={cardColumLimit}
658
- childDetailHeading={childDetailHeading}
659
- columns={columns}
660
- tableBodyRef={tableBodyRef}
661
- actionProps={actionProps}
662
- />
656
+ <div
657
+ className={isCustomTableCardView ? 'qbs-card-single' : 'flex flex-col gap-3 p-2'}
658
+ key={items?.id}
659
+ >
660
+ {isCustomTableCardView ? (
661
+ handleTableCardView?.(items) ?? <></>
662
+ ) : (
663
+ <CardComponent
664
+ data={items}
665
+ cardColumLimit={cardColumLimit}
666
+ childDetailHeading={childDetailHeading}
667
+ columns={columns}
668
+ tableBodyRef={tableBodyRef}
669
+ actionProps={actionProps}
670
+ />
671
+ )}
663
672
  </div>
664
673
  ))
665
674
  )}
package/src/qbsTable/commontypes.ts CHANGED
@@ -127,6 +127,8 @@ export interface QbsTableProps {
127
127
  tableView?: boolean;
128
128
  cardColumLimit?: number;
129
129
  childDetailHeading?: string;
130
+ handleTableCardView?: (data: any) => React.ReactNode;
131
+ isCustomTableCardView?: boolean;
130
132
  }
131
133
 
132
134
  export interface QbsTableToolbarProps {