feature: add new bool property withClasses that add classes to rows (#6)

feature: add new bool property withClasses that adds classes to rows and cells

Author: MariannaMilovanova

README.md

@@ -126,6 +126,7 @@ Properties marked with an asterisk (`*`) are required.
 | | `object` | CSS styles to apply to the parent table tag. |
 | | `function` | Function returning one of the above. The function receives a state object with boolean property narrow indicating if the current presentation is narrow or wide. |
 | `initialNarrow` | `bool` | Initially render the table in narrow mode when rendering serverside. Set to true when you expect the browser to be narrow to prevent rerendering client side. |
+| `withClasses` | `bool` | Add unique class names to each row and header cell, respectively row-KEY and header-KEY |
 
 
 ## name

demo/src/index.js

@@ -53,6 +53,7 @@ const Demo = () => (
       rows={rows}
       keyGetter={keyGetter}
       breakpoint={578}
+      withClasses
       tableStyling={({ narrow }) => (narrow ? 'narrowtable' : 'widetable')}
     />
   </div>);

src/index.js

@@ -26,6 +26,14 @@ const getClassNameOrStyleProps = (classNameOrStyle, componentState) => {
   return {};
 };
 
+function headerClass(withClasses, key) {
+  return withClasses ? { className: `header-${key}` } : {};
+}
+
+function rowClass(withClasses, key) {
+  return withClasses ? { className: `row-${key}` } : {};
+}
+
 const inBrowser = typeof window !== 'undefined';
 const matchMedia = inBrowser && window.matchMedia !== null;
 
@@ -44,10 +52,12 @@ class HyperResponsiveTable extends Component {
       PropTypes.func,
     ]),
     initialNarrow: PropTypes.bool,
+    withClasses: PropTypes.bool,
   };
 
   static defaultProps = {
     initialNarrow: false,
+    withClasses: false,
     tableStyling: null,
   };
 
@@ -113,6 +123,7 @@ class HyperResponsiveTable extends Component {
       headers,
       rows,
       keyGetter,
+      withClasses,
     } = this.props;
     const { narrow } = this.state;
 
@@ -123,7 +134,7 @@ class HyperResponsiveTable extends Component {
         <table {...getClassNameOrStyleProps(tableStyling, this.state)}>
           {rows.map(row => (
             <tbody key={keyGetter(row)}>
-              {dataKeys.map(key => <tr key={key}><th scope="row">{headers[key]}</th><td>{row[key]}</td></tr>)}
+              {dataKeys.map(key => <tr key={key} {...rowClass(withClasses, keyGetter(row))}><th {...headerClass(withClasses, key)} scope="row">{headers[key]}</th><td>{row[key]}</td></tr>)}
             </tbody>))
           }
         </table>);
@@ -133,12 +144,12 @@ class HyperResponsiveTable extends Component {
       <table {...getClassNameOrStyleProps(tableStyling, this.state)}>
         <thead>
           <tr>
-            { dataKeys.map(key => <th key={key} scope="col">{headers[key]}</th>) }
+            {dataKeys.map(key => <th key={key} {...headerClass(withClasses, key)} scope="col">{headers[key]}</th>)}
           </tr>
         </thead>
         <tbody>
           {rows.map(row => (
-            <tr key={keyGetter(row)}>
+            <tr key={keyGetter(row)} {...rowClass(withClasses, keyGetter(row))}>
               {dataKeys.map(key => <td key={key}>{row[key]}</td>)}
             </tr>))}
         </tbody>

tests/index-test.js

@@ -169,4 +169,28 @@ describe('Component', () => {
       expect(table.getAttribute('style')).toEqual(null);
     });
   });
+
+  it('add classes to headers and rows if pass the property `withClasses`', () => {
+    const breakpoint = 0;
+    const tableStyling = 1234;
+    const withClasses = true;
+
+    const props = {
+      headers,
+      rows,
+      keyGetter,
+      breakpoint,
+      tableStyling,
+      withClasses,
+    };
+
+    render(<Component {...props} />, node, () => {
+      const th = node.querySelectorAll('th');
+      const tbody = node.querySelectorAll('tbody');
+      const tr = tbody[0].querySelectorAll('tr');
+
+      expect(th[0].getAttribute('class')).toEqual('header-a');
+      expect(tr[0].getAttribute('class')).toEqual('row-A 1');
+    });
+  });
 });