Merge pull request #247 from Chun-MingChen/feature/customized-class-n-id-on-table

customized classes and id on BootstrapTable (#235)

packages/react-bootstrap-table2-example/examples/basic/customized-id-classes.js

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+<BootstrapTable id="bar" keyField='id' data={ products } columns={ columns } />
+<BootstrapTable classes="foo" keyField='id' data={ products } columns={ columns } />
+`;
+
+export default () => (
+  <div>
+    <h4> Customized table ID </h4>
+    <BootstrapTable id="bar" keyField="id" data={ products } columns={ columns } />
+
+    <h4> Customized table className </h4>
+    <BootstrapTable classes="foo" keyField="id" data={ products } columns={ columns } />
+
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/stories/index.js

@@ -9,6 +9,7 @@ import BasicTable from 'examples/basic';
 import BorderlessTable from 'examples/basic/borderless-table';
 import StripHoverCondensedTable from 'examples/basic/striped-hover-condensed-table';
 import NoDataTable from 'examples/basic/no-data-table';
+import CustomizedIdClassesTable from 'examples/basic/customized-id-classes';
 import CaptionTable from 'examples/basic/caption-table';
 
 // work on columns
@@ -121,6 +122,7 @@ storiesOf('Basic Table', module)
   .add('striped, hover, condensed table', () => <StripHoverCondensedTable />)
   .add('borderless table', () => <BorderlessTable />)
   .add('Indication For Empty Table', () => <NoDataTable />)
+  .add('Customized id and class table', () => <CustomizedIdClassesTable />)
   .add('Table with caption', () => <CaptionTable />);
 
 storiesOf('Work on Columns', module)

packages/react-bootstrap-table2-example/stories/stylesheet/base-table/_index.scss

@@ -0,0 +1,7 @@
+table.foo {
+  background-color: $grey-500;
+}
+
+table#bar {
+  background-color: $light-blue;
+}

packages/react-bootstrap-table2-example/stories/stylesheet/storybook.scss

@@ -3,6 +3,7 @@
 @import "base/github-corner";
 @import "base/code-block";
 
+@import "base-table/index";
 @import "welcome/index";
 @import "columns/index";
 @import "cell-edit/index";

packages/react-bootstrap-table2/src/bootstrap-table.js

@@ -42,6 +42,8 @@ class BootstrapTable extends PropsBaseResolver(Component) {
       store,
       columns,
       keyField,
+      id,
+      classes,
       striped,
       hover,
       bordered,
@@ -58,7 +60,7 @@ class BootstrapTable extends PropsBaseResolver(Component) {
       'table-hover': hover,
       'table-bordered': bordered,
       'table-condensed': condensed
-    });
+    }, classes);
 
     const cellSelectionInfo = this.resolveSelectRowProps({
       onRowSelect: this.props.onRowSelect
@@ -74,7 +76,7 @@ class BootstrapTable extends PropsBaseResolver(Component) {
 
     return (
       <div className="react-bootstrap-table">
-        <table className={ tableClass }>
+        <table id={ id } className={ tableClass }>
           { tableCaption }
           <Header
             columns={ columns }
@@ -116,6 +118,8 @@ BootstrapTable.propTypes = {
   striped: PropTypes.bool,
   bordered: PropTypes.bool,
   hover: PropTypes.bool,
+  id: PropTypes.string,
+  classes: PropTypes.string,
   condensed: PropTypes.bool,
   caption: PropTypes.oneOfType([
     PropTypes.node,

packages/react-bootstrap-table2/test/bootstrap-table.test.js

@@ -46,8 +46,50 @@ describe('BootstrapTable', () => {
       expect(wrapper.state().data).toEqual(store.data);
     });
 
-    it('should have table-bordered class as default', () => {
-      expect(wrapper.find('table.table-bordered').length).toBe(1);
+    it("should only have classes 'table' and 'table-bordered' as default", () => {
+      expect(wrapper.find('table').prop('className')).toBe('table table-bordered');
+    });
+
+    it('should not have customized id as default', () => {
+      expect(wrapper.find('table').prop('id')).toBeUndefined();
+    });
+  });
+
+  describe('when props.classes was defined', () => {
+    const classes = 'foo';
+
+    beforeEach(() => {
+      wrapper = shallow(
+        <BootstrapTable
+          keyField="id"
+          columns={ columns }
+          data={ data }
+          store={ store }
+          classes={ classes }
+        />);
+    });
+
+    it('should display customized classes correctly', () => {
+      expect(wrapper.find(`table.${classes}`).length).toBe(1);
+    });
+  });
+
+  describe('when props.id was defined', () => {
+    const id = 'foo';
+
+    beforeEach(() => {
+      wrapper = shallow(
+        <BootstrapTable
+          keyField="id"
+          columns={ columns }
+          data={ data }
+          store={ store }
+          id={ id }
+        />);
+    });
+
+    it('should display customized id correctly', () => {
+      expect(wrapper.find(`table#${id}`).length).toBe(1);
     });
   });