Merge pull request #289 from komarovalexander/dev

Add noData setting
komarovalexander · Mar 6, 2023 · 0b8d48e · 0b8d48e
2 parents 5245218 + fb6d6cf
commit 0b8d48e
Show file tree

Hide file tree

Showing 8 changed files with 58 additions and 26 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ka-table",
-  "version": "7.11.1",
+  "version": "7.12.0",
   "license": "MIT",
   "repository": "github:komarovalexander/ka-table",
   "homepage": "https://komarovalexander.github.io/ka-table/#/overview",

diff --git a/src/Demos/SearchDemo/SearchDemo.tsx b/src/Demos/SearchDemo/SearchDemo.tsx
@@ -31,10 +31,8 @@ const SearchDemo: React.FC = () => {
         }}
         rowKeyField={'id'}
         searchText={searchText}
-        childComponents={{
-          noDataRow: {
-            content: () => 'No Data Found'
-          }
+        noData={{
+          text: 'No Data Found'
         }}
       />
     </>

diff --git a/src/lib/Components/NoDataRow/NoDataRow.tsx b/src/lib/Components/NoDataRow/NoDataRow.tsx
@@ -7,6 +7,7 @@ const NoDataRow: React.FunctionComponent<INoDataRowProps> = (props) => {
     childComponents,
     columns,
     groupColumnsCount,
+    noData
   } = props;
   const { elementAttributes, content } = getElementCustomization({
     className: 'ka-tr ka-no-data-row'
@@ -17,7 +18,7 @@ const NoDataRow: React.FunctionComponent<INoDataRowProps> = (props) => {
   return (
     <tr {...elementAttributes}>
       <td colSpan={columns.length + groupColumnsCount} {...cellElementAttributes}>
-        {content || cellContent}
+        {content || cellContent || noData?.text}
       </td>
     </tr>
   );

diff --git a/src/lib/Components/Table/Table.tsx b/src/lib/Components/Table/Table.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as actionCreators from '../../actionCreators';
 
-import { ControlledPropsKeys, DispatchFunc, FilterFunc, FormatFunc, OnDispatchFunc, SearchFunc, SortFunc, ValidationFunc } from '../../types';
+import { ControlledPropsKeys, DispatchFunc, FilterFunc, FormatFunc, NoData, OnDispatchFunc, SearchFunc, SortFunc, ValidationFunc } from '../../types';
 import { EditableCell, PagingOptions } from '../../models';
 import { EditingMode, FilteringMode, SortingMode } from '../../enums';
 
@@ -52,6 +52,7 @@ export interface ITableProps {
   selectedRows?: any[];
   singleAction?: any;
   sort?: SortFunc;
+  noData?: NoData,
   sortingMode?: SortingMode;
   validation?: ValidationFunc;
   virtualScrolling?: VirtualScrolling;

diff --git a/src/lib/Components/TableWrapper/TableWrapper.test.tsx b/src/lib/Components/TableWrapper/TableWrapper.test.tsx
@@ -1,10 +1,9 @@
 import Enzyme, { mount } from 'enzyme';
-import React from 'react';
-import ReactDOM from 'react-dom';
-
-import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 
 import { ActionType } from '../../enums';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import React from 'react';
+import ReactDOM from 'react-dom';
 import { TableWrapper } from './TableWrapper';
 
 Enzyme.configure({ adapter: new Adapter() });
@@ -60,6 +59,30 @@ describe('TableWrapper', () => {
     expect(wrapper.find('tfoot').length).toBe(0);
   });
 
+  describe('header', () => {
+    it('hides table header in case of noData.hideHeader=true and data is empty', () => {
+      const wrapper = mount((
+        <TableWrapper {...tableProps} data={[]} noData={{hideHeader: true}}/>
+      ));
+
+      expect(wrapper.find('thead').length).toBe(0);
+    });
+    it('shows table header in case of noData.hideHeader=true and data has values', () => {
+      const wrapper = mount((
+        <TableWrapper {...tableProps} noData={{hideHeader: false}}/>
+      ));
+
+      expect(wrapper.find('thead').length).toBe(1);
+    });
+    it('shows table header in case of noData.hideHeader=false and data is empty', () => {
+      const wrapper = mount((
+        <TableWrapper {...tableProps} data={[]} noData={{hideHeader: false}}/>
+      ));
+
+      expect(wrapper.find('thead').length).toBe(1);
+    });
+  });
+
   it('shows table foot in case of tableFoot to be set', () => {
     const wrapper = mount((
       <TableWrapper {...tableProps} childComponents={{

diff --git a/src/lib/Components/TableWrapper/TableWrapper.tsx b/src/lib/Components/TableWrapper/TableWrapper.tsx
@@ -1,16 +1,17 @@
 import * as React from 'react';
 
-import { ITableAllProps } from '../..';
-import defaultOptions from '../../defaultOptions';
 import { ActionType, EditingMode, FilteringMode, SortingMode } from '../../enums';
-import { getElementCustomization } from '../../Utils/ComponentUtils';
-import { getExpandedGroups } from '../../Utils/GroupUtils';
-import { prepareTableOptions } from '../../Utils/PropsUtils';
-import { isVirtualScrollingEnabled } from '../../Utils/Virtualize';
+
 import { ColGroup } from '../ColGroup/ColGroup';
+import { ITableAllProps } from '../..';
 import TableBody from '../TableBody/TableBody';
 import { TableFoot } from '../TableFoot/TableFoot';
 import { TableHead } from '../TableHead/TableHead';
+import defaultOptions from '../../defaultOptions';
+import { getElementCustomization } from '../../Utils/ComponentUtils';
+import { getExpandedGroups } from '../../Utils/GroupUtils';
+import { isVirtualScrollingEnabled } from '../../Utils/Virtualize';
+import { prepareTableOptions } from '../../Utils/PropsUtils';
 
 export const TableWrapper: React.FunctionComponent<ITableAllProps> = (props) => {
   const {
@@ -26,7 +27,8 @@ export const TableWrapper: React.FunctionComponent<ITableAllProps> = (props) =>
     rowReordering = false,
     selectedRows = [],
     sortingMode = SortingMode.None,
-    virtualScrolling
+    virtualScrolling,
+    noData
   } = props;
   let {
     groupsExpanded,
@@ -52,6 +54,7 @@ export const TableWrapper: React.FunctionComponent<ITableAllProps> = (props) =>
   const { elementAttributes, content } = getElementCustomization({
     className: defaultOptions.css.table,
   }, props, childComponents.table);
+
   return (
     <div {...tableWrapper.elementAttributes}>
       {content || tableWrapper.content || (
@@ -60,7 +63,7 @@ export const TableWrapper: React.FunctionComponent<ITableAllProps> = (props) =>
             columns={preparedOptions.columns}
             groupColumnsCount={preparedOptions.groupColumnsCount}
           />
-          <TableHead
+           {(!noData?.hideHeader || !!preparedOptions.groupedData.length) && <TableHead
             {...props}
             areAllRowsSelected={areAllRowsSelected}
             childComponents={childComponents}
@@ -71,7 +74,7 @@ export const TableWrapper: React.FunctionComponent<ITableAllProps> = (props) =>
             filteringMode={filteringMode}
             groupColumnsCount={preparedOptions.groupColumnsCount}
             sortingMode={sortingMode}
-          />
+          />}
           <TableBody
             {...props}
             childComponents={childComponents}

diff --git a/src/lib/props.ts b/src/lib/props.ts
@@ -1,10 +1,10 @@
+import { ChildComponents, Column, EditableCell, Group, VirtualScrolling } from './models';
+import { DispatchFunc, Field, FormatFunc, NoData, ValidationFunc } from './types';
+import { EditingMode, FilteringMode, SortingMode } from './enums';
 
+import { GroupedColumn } from './Models/GroupedColumn';
 import { IRowsProps } from './Components/Rows/Rows';
 import { ITableAllProps } from './Components/Table/Table';
-import { EditingMode, FilteringMode, SortingMode } from './enums';
-import { ChildComponents, Column, EditableCell, Group, VirtualScrolling } from './models';
-import { GroupedColumn } from './Models/GroupedColumn';
-import { DispatchFunc, Field, FormatFunc, ValidationFunc } from './types';
 
 export interface IColGroupProps {
   columns: Column[];
@@ -141,6 +141,7 @@ export interface INoDataRowProps {
   childComponents: ChildComponents,
   columns: Column[];
   groupColumnsCount: number;
+  noData?: NoData;
 }
 
 export interface ITableHeadProps {
@@ -172,6 +173,7 @@ export interface ITableBodyProps {
   rowKeyField: string;
   rowReordering: boolean;
   selectedRows: any[];
+  noData?: NoData;
   validation?: ValidationFunc;
   virtualScrolling?: VirtualScrolling;
   treeExpandButtonColumnKey?: string;

diff --git a/src/lib/types.ts b/src/lib/types.ts
@@ -2,8 +2,12 @@ import { AttributeTableData, Column } from './models';
 
 import { ITableProps } from './Components/Table/Table';
 
-type AddParameters<T, I> =
-T extends (e: infer E) => void ? (
+export interface NoData {
+  text?: string;
+  hideHeader?: boolean;
+}
+
+type AddParameters<T, I> = T extends (e: infer E) => void ? (
     (e: E, extendedEvent: AttributeTableData<I>) => void
 ) : T;
 type WithExtraParameters<T, I> = {