feat: make TableFooter more composeable

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 on the left and pagination and page information on the right.
+Alternately, it will accept children.
 
 ```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`.