Merge pull request #285 from komarovalexander/dev

Add noDataCell childComponent

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ka-table",
-  "version": "7.10.1",
+  "version": "7.11.0",
   "license": "MIT",
   "repository": "github:komarovalexander/ka-table",
   "homepage": "https://komarovalexander.github.io/ka-table/#/overview",

src/lib/Components/NoDataRow/NoDataRow.test.tsx

@@ -1,8 +1,13 @@
+import Enzyme, { mount } from 'enzyme';
+
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { INoDataRowProps } from '../../props';
 import NoDataRow from './NoDataRow';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
+Enzyme.configure({ adapter: new Adapter() });
+
 const props: INoDataRowProps = {
     childComponents: {},
     columns: [],
@@ -14,3 +19,17 @@ it('renders without crashing', () => {
     ReactDOM.render(<NoDataRow {...props} />, div);
     ReactDOM.unmountComponentAtNode(div);
 });
+
+it('custom colspan for cell', () => {
+    const wrapper = mount(<NoDataRow {...props} childComponents={{
+        noDataCell: {
+            elementAttributes: () => ({
+                colSpan: 100
+            })
+        }
+    }}/>, {
+        attachTo: document.createElement('tbody')
+    });
+    expect(wrapper.find('.ka-no-data-cell').exists()).toBeTruthy();
+    expect(wrapper.find('.ka-no-data-cell').prop('colSpan')).toBe(100);
+});

src/lib/Components/NoDataRow/NoDataRow.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
-
 import { INoDataRowProps } from '../../props';
+import React from 'react';
 import { getElementCustomization } from '../../Utils/ComponentUtils';
 
 const NoDataRow: React.FunctionComponent<INoDataRowProps> = (props) => {
@@ -12,10 +11,13 @@ const NoDataRow: React.FunctionComponent<INoDataRowProps> = (props) => {
   const { elementAttributes, content } = getElementCustomization({
     className: 'ka-tr ka-no-data-row'
   }, props, childComponents.noDataRow);
+  const { elementAttributes: cellElementAttributes, content: cellContent } = getElementCustomization({
+    className: 'ka-no-data-cell'
+  }, props, childComponents.noDataCell);
   return (
     <tr {...elementAttributes}>
-      <td className='ka-no-data-cell' colSpan={columns.length + groupColumnsCount}>
-        {content}
+      <td colSpan={columns.length + groupColumnsCount} {...cellElementAttributes}>
+        {content || cellContent}
       </td>
     </tr>
   );

src/lib/Models/ChildComponents.ts

@@ -29,6 +29,7 @@ export class ChildComponents {
   public headRow?: ChildComponent<IHeadRowProps>;
   public loading?: ChildComponent<ILoadingProps>;
   public noDataRow?: ChildComponent<INoDataRowProps>;
+  public noDataCell?: ChildComponent<INoDataRowProps>;
   public paging?: ChildComponent<IPagingProps>;
   public pagingIndex?: ChildComponent<IPagingIndexProps>;
   public pagingPages?: ChildComponent<IPagingProps>;