Allow class name overriding for filter and page size

README.md

@@ -137,12 +137,16 @@ The `sematable(tableName, component, columns, configs)` wrapper accepts three pa
  - _columns_ is an array of column definitions
  - _configs_ is an optional object where you can specify configuration properties
 
-Configuration properties:
+### Configuration properties:
 
  - _showPageSize_ if page size select should be shown
  - _showFilter_ if text filter field should be shown
  - _defaultPageSize_ overrides the default page size (if not specified 5 will be used)
  - _autoHidePagination_ if pagination should be hidden if the number of pages is 1 (default is true, which means pagination is hidden if the number of pages is equal to 1)
+ - _filterClassName_ css class for the filter component
+ - _filterContainerClassName_ css class for the filter component container element ('col-md-6' by default)
+ - _pageSizeClassName_ css class for the page size component ('col-md-6' by default)
+ - _pageSizeContainerClassName_ css class for the page size component container element ('col-md-6' by default)
 
 There's no requirement that the wrapped component needs to be a table, it could
 be a list, a div, an image gallery, or anything else.

src/Filter.js

@@ -7,6 +7,7 @@ const propTypes = {
   onChange: PropTypes.func.isRequired,
   onTextChange: PropTypes.func.isRequired,
   options: PropTypes.array.isRequired,
+  className: PropTypes.string,
 };
 
 class Filter extends Component {
@@ -24,9 +25,11 @@ class Filter extends Component {
       onChange,
       onTextChange,
       options,
+      className,
     } = this.props;
     return (
       <Creatable
+        className={className}
         options={options}
         noResultsText="Type text to search, press Enter to save as filter"
         placeholder="Search by text or tags"

src/PageSize.js

@@ -3,17 +3,19 @@ import React, { Component, PropTypes } from 'react';
 const propTypes = {
   pageSize: PropTypes.number.isRequired,
   onChange: PropTypes.func.isRequired,
+  className: PropTypes.string,
 };
 
 class PageSize extends Component {
   render() {
     const {
       pageSize,
       onChange,
+      className = 'col-md-6',
     } = this.props;
     return (
       <div
-        className="col-md-6"
+        className={className}
         style={{
           margin: '1rem 0 1rem 0',
         }}

src/sematable.js

@@ -145,6 +145,10 @@ const sematable = (tableName, TableComponent, columns, configs = {}) => {
         showPageSize = true,
         showFilter = true,
         autoHidePagination = true,
+        pageSizeContainerClassName = 'col-md-6',
+        filterContainerClassName = 'col-md-6',
+        pageSizeClassName,
+        filterClassName,
       } = configs;
 
       if (!isInitialized) {
@@ -178,14 +182,16 @@ const sematable = (tableName, TableComponent, columns, configs = {}) => {
 
       return (
         <div className="row">
-          <div className="col-md-6">
+          <div className={pageSizeContainerClassName}>
             {showPageSize && <PageSize
+              className={pageSizeClassName}
               pageSize={pageInfo.pageSize}
               onChange={(f) => onPageSizeChange(f)}
             />}
           </div>
-          <div className="col-md-6">
+          <div className={filterContainerClassName}>
             {showFilter && <Filter
+              className={filterClassName}
               value={filter}
               options={filterOptions}
               onChange={(f) => onFilterChange(f)}