Customize labels "Search" and "Page Size" with props.

example/table/main.js

@@ -26,6 +26,8 @@ function buildTable(data) {
       initialPageLength={5}
       initialSortBy={{ prop: 'city', order: 'descending' }}
       pageLengthOptions={[ 5, 20, 50 ]}
+      searchText='Search Everything'
+      pageSizeText='Per page'
     />
   );
 }

src/PartialTable.js

@@ -7,7 +7,8 @@ export default class PartialTable extends Component {
   render() {
     const {
       onFilter, onPageSizeChange, onPageNumberChange, onSort,
-      pageLengthOptions, columns, keys, buildRowOptions,
+      pageLengthOptions, columns, keys, searchText,
+      pageSizeText, buildRowOptions,
     } = this.props;
 
     const {
@@ -20,7 +21,7 @@ export default class PartialTable extends Component {
         <div className="row">
           <div className="col-xs-4">
             <div>
-              <label htmlFor="page-menu">Page size:</label>
+              <label htmlFor="page-menu">{pageSizeText}:</label>
               <select
                 id="page-menu"
                 value={pageSize}
@@ -34,7 +35,7 @@ export default class PartialTable extends Component {
               </select>
             </div>
             <div>
-              <label htmlFor="search-field">Search:</label>
+              <label htmlFor="search-field">{searchText}:</label>
               <input
                 id="search-field"
                 type="search"

src/__tests__/dataReducer-test.js

@@ -24,6 +24,8 @@ describe('dataReducer', () => {
       pageNumber: 0,
       pageSize: 5,
       totalPages: 1,
+      searchText: 'Search',
+      pageSizeText: 'Page size',
     };
 
     expect(dataReducer(undefined, action)).toEqual(expected);

src/dataReducer.js

@@ -15,6 +15,8 @@ const initialState: State = {
   sortBy: null,
   pageNumber: 0,
   pageSize: 5,
+  searchText: 'Search',
+  pageSizeText: 'Page size',
 };
 
 function calculatePage(data, pageSize, pageNumber) {

src/enhanceDataTable.js

@@ -15,6 +15,8 @@ type Props = {
   keys: Array<string>;
   buildRowOptions: any;
   filters: any;
+  searchText: string;
+  pageSizeText: string;
 };
 
 const mapPropsToState = (props) => ({
@@ -30,6 +32,8 @@ export default function enhanceDataTable(ComposedComponent) {
       filters: {
         globalSearch: { filter: containsIgnoreCase },
       },
+      searchText: 'Search',
+      pageSizeText: 'Page size',
     };
 
     constructor(props: Props) {

src/types.js

@@ -24,6 +24,8 @@ export type State = {
   pageSize: number;
   pageNumber: number;
   totalPages: number;
+  searchText: string;
+  pageSizeText: string;
   filterValues: {
     [key: string]: string;
   };