feat: make TableFooter more composeable

Users can pass whatever components they want to be displayed in the footer
Defaults to the current RowStatus component on the left and TablePagination on the right

src/DataTable/DataTable.scss

@@ -90,10 +90,7 @@ $data-table-footer-position: center !default;
   display: flex;
   justify-content: space-between;
   padding: $data-table-padding-x $data-table-padding-y;
-
-  .pgn__data-table-footer-row-status {
-    align-self: $data-table-footer-position;
-  }
+  align-items: center;
 }
 
 .pgn__data-table-pagination {

src/DataTable/TableFooter.jsx

@@ -1,15 +1,33 @@
 /* eslint-disable react/require-default-props */
 import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
 import RowStatus from './RowStatus';
 import TablePagination from './TablePagination';
 
-const TableFooter = () => (
-  <div className="pgn__data-table-footer">
-    <RowStatus
-      className="pgn__data-table-footer-row-status"
-    />
-    <TablePagination />
+const TableFooter = ({ className, children }) => (
+  <div className={classNames(className, 'pgn__data-table-footer')}>
+    {children}
   </div>
 );
 
+TableFooter.defaultProps = {
+  children: (
+    <>
+      <TablePagination />
+      <RowStatus />
+    </>
+  ),
+  className: null,
+};
+
+TableFooter.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.node,
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.node])),
+  ]),
+};
+
 export default TableFooter;

src/DataTable/tests/TableFooter.test.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import TableFooter from '../TableFooter';
+import RowStatus from '../RowStatus';
+import TablePagination from '../TablePagination';
+import DataTableContext from '../DataTableContext';
+
+const footerInstance = {
+  previousPage: () => {},
+  nextPage: () => {},
+  canPreviousPage: true,
+  canNextPage: true,
+  state: { pageIndex: 1 },
+  pageCount: 3,
+  itemCount: 30,
+};
+
+// eslint-disable-next-line react/prop-types
+const TableFooterWrapper = ({ value = footerInstance, props = {}, children }) => (
+  <DataTableContext.Provider value={value}>
+    <TableFooter {...props}>{children}</TableFooter>
+  </DataTableContext.Provider>
+);
+
+describe('<TableFooter />', () => {
+  it('Renders the default footer', () => {
+    const wrapper = mount(<TableFooterWrapper />);
+    expect(wrapper.find(RowStatus)).toHaveLength(1);
+    expect(wrapper.find(TablePagination)).toHaveLength(1);
+  });
+  it('accepts a class name', () => {
+    const fakeClass = 'fancy-class';
+    const wrapper = mount(<TableFooterWrapper props={{ className: fakeClass }} />);
+    expect(wrapper.find(TableFooter).props().className).toContain(fakeClass);
+  });
+  it('renders a children', () => {
+    const leftText = "I'm on the left";
+    const wrapper = mount(<TableFooterWrapper><div>{leftText}</div></TableFooterWrapper>);
+    expect(wrapper.text()).toContain(leftText);
+  });
+});

src/index.js

@@ -105,6 +105,7 @@ export { default as TableCell } from './DataTable/TableCell';
 export { default as TableFilters } from './DataTable/TableFilters';
 export { default as TableHeader } from './DataTable/TableHeaderRow';
 export { default as TableRow } from './DataTable/TableRow';
+export { default as TablePagination } from './DataTable/TablePagination';
 export { default as DataTableContext } from './DataTable/DataTableContext';
 export { default as BulkActions } from './DataTable/BulkActions';
 export { default as TableControlBar } from './DataTable/TableControlBar';

www/src/pages/table/tablefooter.mdx

@@ -18,7 +18,8 @@ import SingleComponentStatus from '../../components/SingleComponentStatus';
 <a href="/table/datatable">Main DataTable page</a>
 
 The `TableFooter` component is meant to be rendered within a `DataTableContext` (provided by `DataTable` here).
-It shows a how many items are being displayed and pagination information.
+By default, it shows a how many items are being displayed and pagination information. It is a display component,
+and will accept a `RightComponent` and a `LeftComponent` that will override it's defaults.
 
 ```jsx live
 <DataTable
@@ -90,8 +91,46 @@ It shows a how many items are being displayed and pagination information.
 </DataTable>
 ```
 
+## Rendering with override components
+```jsx live
+<DataTable
+  isPaginated
+  initialState={{
+    pageSize: 3,
+    pageIndex: 0
+  }}
+  columns={[
+    {
+      Header: 'Name',
+      accessor: 'name',
+
+    },
+  ]}
+  itemCount={7}
+  data={[
+      {
+        name: 'Lil Bub',
+        color: 'brown tabby',
+        famous_for: 'weird tongue',
+      },
+      {
+        name: 'Grumpy Cat',
+        color: 'siamese',
+        famous_for: 'serving moods',
+      },
+
+    ]}
+>
+  <TableFooter>
+    <div>Custom component</div>
+    <div>More custom data</div>
+    <TablePagination />
+  </TableFooter>
+</DataTable>
+```
+
 
-<PropsTable {...props.data.tableFooter} content="The `TableFooter` component does not accept any props" />
+<PropsTable {...props.data.tableFooter} />
 
 ## Footer subcomponents
 These components can be rendered independently of the `TableFooter` component with a `DataTableContext`.