Merge pull request #71 from jbetancur/feature-subheader-1

implement optional subheader

Author: jbetancur

README.md

@@ -87,9 +87,9 @@ Nothing new here - we are using an array of object literals and properties to de
 | striped | bool | no | false | stripe color the odd rows |
 | highlightOnHover | bool | no | false | if rows are to be highlighted on hover |
 | pointerOnHover | bool | no | false | if rows show a point icon on hover |
-| actions | array of components | no |  | add actions to the TableHeader |
+| actions | component or array of components | no |  | add actions to the TableHeader |
 | contextTitle | string | no |  | override the context menu title |
-| contextActions | array of components | no |  | add context action as an array of components |
+| contextActions | component or array of components| no |  | add context actions to the TableHeader context|
 | onTableUpdate | func | no |  | callback to access the entire Data Table state ({ allSelected, selectedCount, selectedRows, sortColumn, sortDirection, rows }) |
 | onRowClicked | func | no | | callback to access the row data,index on row click |
 | clearSelectedRows | bool | no | false | toggling this property clears the selectedRows. If you use redux or react state you need to make sure that you pass a toggled value or the component will not update. See [Clearing Selected Rows](#clearing-selected-rows)|
@@ -114,7 +114,12 @@ Nothing new here - we are using an array of object literals and properties to de
 | paginationIconLastPage |  | no | JSX | a component that overrides the last page icon for the pagination |
 | paginationIconNext |  | no | JSX | a component that overrides the next page icon for the pagination |
 | paginationIconPrevious |  | no | JSX | a component that overrides the previous page icon for the pagination |
-  
+| subHeader | component or array of components | no | false | show a subheader between the table and table header
+| subHeaderAlign | string | no | right | align the subheader content (left, right, center)
+| subHeaderWrap | bool | no | true | whether the subheader content should wrap
+| subHeader | component or array of components | no | false | show a subheader between the table and table header
+| subHeaderComponent |  component or array of components | no | [] | a component you want to render |
+
 #### Advanced Selectable Component Options
 Sometimes 3rd party checkbox components have their own way of handling indeterminate state. We don't want React Data Table hardcoded to a specific ui lib or custom component, so instead a "hook" is provided to allow you to pass a function that will be resolved by React Data Table's internal `Checkbox` for use with `indeterminate` functionality.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-data-table-component",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "A declarative react based data table",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

src/DataTable/DataTable.js

@@ -12,6 +12,7 @@ import TableRow from './TableRow';
 import TableCol from './TableCol';
 import TableColCheckbox from './TableColCheckbox';
 import TableHeader from './TableHeader';
+import TableSubheader from './TableSubheader';
 import TableBody from './TableBody';
 import ResponsiveWrapper from './ResponsiveWrapper';
 import ProgressWrapper from './ProgressWrapper';
@@ -216,6 +217,10 @@ class DataTable extends Component {
       pagination,
       selectableRows,
       expandableRows,
+      subHeader,
+      subHeaderAlign,
+      subHeaderWrap,
+      subHeaderComponent,
     } = this.props;
 
     const {
@@ -250,6 +255,14 @@ class DataTable extends Component {
               />
             )}
 
+            {subHeader && (
+              <TableSubheader
+                align={subHeaderAlign}
+                wrapContent={subHeaderWrap}
+                component={subHeaderComponent}
+              />
+            )}
+
             <TableWrapper>
               {progressPending && (
                 <ProgressWrapper

src/DataTable/TableHeader.js

@@ -14,6 +14,7 @@ const TableHeaderStyle = styled.header`
   min-height: 64px;
   width: 100%;
   background-color: ${props => props.theme.title.backgroundColor};
+  flex-wrap: wrap;
 `;
 
 const Title = styled.div`
@@ -26,8 +27,8 @@ const Title = styled.div`
 const Actions = styled.div`
   flex: 1 0 auto;
   display: flex;
-  justify-content: flex-end;
   align-items: center;
+  justify-content: flex-end;
 
   > * {
     margin-left: 5px;

src/DataTable/TableSubheader.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+const alignMap = {
+  left: 'flex-start',
+  right: 'flex-end',
+  center: 'center',
+};
+
+const SubheaderWrapper = styled.header`
+  position: relative;
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  padding: 0 16px 0 24px;
+  min-height: 48px;
+  width: 100%;
+  background-color: ${props => props.theme.title.backgroundColor};
+  justify-content: ${props => alignMap[props.align]};
+  flex-wrap: ${props => (props.wrapContent ? 'wrap' : 'nowrap')};
+`;
+
+const TableSubheader = ({ align, wrapContent, component }) => (
+  <SubheaderWrapper align={align} wrapContent={wrapContent}>
+    {component}
+  </SubheaderWrapper>
+);
+
+TableSubheader.propTypes = {
+  component: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+    PropTypes.string,
+  ]),
+  align: PropTypes.oneOf(['center', 'left', 'right']),
+  wrapContent: PropTypes.bool,
+};
+
+TableSubheader.defaultProps = {
+  component: null,
+  align: 'right',
+  wrapContent: true,
+};
+
+export default TableSubheader;

src/DataTable/__tests__/DataTable.test.js

@@ -309,3 +309,19 @@ describe('Pagination', () => {
     expect(onChangeRowsPerPageMock).toBeCalledWith(20);
   });
 });
+
+describe('Subheader', () => {
+  test('should render correctly when a subheader is enabled', () => {
+    const mock = dataMock();
+    const { container } = render(
+      <DataTable
+        data={mock.data}
+        columns={mock.columns}
+        subheader
+        subheaderComponent={<div />}
+      />,
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

src/DataTable/__tests__/TableHeader.test.js

@@ -6,20 +6,26 @@ import TableHeader from '../TableHeader';
 
 afterEach(cleanup);
 
-test('<TableHeader title showContextMenu /> should render correctly', () => {
-  const { container } = renderWithTheme(<TableHeader title="whoa!" showContextMenu />);
+test('<TableHeader title showContextMenu should render correctly', () => {
+  const { container } = renderWithTheme(<TableHeader title="whoa!" />);
 
   expect(container.firstChild).toMatchSnapshot();
 });
 
-test('<TableHeader title contextTitle /> should render correctly', () => {
+test('<TableHeader title contextTitle should render correctly', () => {
   const { container } = renderWithTheme(<TableHeader title="whoa!" contextTitle="items!!!" />);
 
   expect(container.firstChild).toMatchSnapshot();
 });
 
-test('<TableHeader title contextActions /> should render correctly', () => {
-  const { container } = renderWithTheme(<TableHeader title="whoa!" contextActions={[<div>some action</div>]} />);
+test('<TableHeader with actions should render correctly', () => {
+  const { container } = renderWithTheme(<TableHeader title="whoa!" actions={<><div>some action</div>, <div>some action 2</div></>} />);
+
+  expect(container.firstChild).toMatchSnapshot();
+});
+
+test('<TableHeader with showContextMenu/contextActions should render correctly', () => {
+  const { container } = renderWithTheme(<TableHeader title="whoa!" showContextMenu contextActions={<><div>some action</div>, <div>some action 2</div></>} />);
 
   expect(container.firstChild).toMatchSnapshot();
 });

src/DataTable/__tests__/TableSubheader.test..js

@@ -0,0 +1,43 @@
+import 'jest-styled-components';
+import React from 'react';
+import { cleanup } from 'react-testing-library';
+import { renderWithTheme } from '../../test-helpers';
+import TableSubheader from '../TableSubheader';
+
+afterEach(cleanup);
+
+test('<TableSubheader defaults should render correctly', () => {
+  const { container } = renderWithTheme(<TableSubheader />);
+
+  expect(container.firstChild).toMatchSnapshot();
+});
+
+test('<TableSubheader with component should render correctly', () => {
+  const { container } = renderWithTheme(<TableSubheader component={<div />} />);
+
+  expect(container.firstChild).toMatchSnapshot();
+});
+
+test('<TableSubheader with component should render when wrap is false', () => {
+  const { container } = renderWithTheme(<TableSubheader component={<div />} wrapContent={false} />);
+
+  expect(container.firstChild).toMatchSnapshot();
+});
+
+test('<TableSubheader with component should render correctly with left align', () => {
+  const { container } = renderWithTheme(<TableSubheader component={<div />} align="left" />);
+
+  expect(container.firstChild).toMatchSnapshot();
+});
+
+test('<TableSubheader with component should render correctly with center align', () => {
+  const { container } = renderWithTheme(<TableSubheader component={<div />} align="center" />);
+
+  expect(container.firstChild).toMatchSnapshot();
+});
+
+test('<TableSubheader with component should render correctly with right align', () => {
+  const { container } = renderWithTheme(<TableSubheader component={<div />} align="right" />);
+
+  expect(container.firstChild).toMatchSnapshot();
+});