Init

Preview: http://dashboards.webkom.co/react/airframe

app/routes/Tables/ExtendedTable/components/ClearSearch.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import _ from 'lodash';
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider from 'react-bootstrap-table2-toolkit';
+import faker from 'faker/locale/en_US';
+
+import { CustomSearch } from './CustomSearch';
+
+const columns = [
+    {
+        dataField: 'id',
+        text: 'Product ID'
+    }, {
+        dataField: 'name',
+        text: 'Product Name'
+    }, {
+        dataField: 'price',
+        text: 'Product Price'
+    }
+];
+
+const data = _.times(5, (index) => ({
+    id: index,
+    name: faker.commerce.productName(),
+    price: Math.round(2000 + Math.random() * 500)
+}));
+
+export const ClearSearch = () => (
+    <ToolkitProvider
+        keyField="id"
+        data={ data }
+        columns={ columns }
+        search
+    >
+    {
+        props => (
+            <React.Fragment>
+                <div className="d-flex align-items-center justify-content-between">
+                <h6 className="mt-0">
+                        Table Search with Clear
+                    </h6>
+
+                    <div>
+                        <CustomSearch
+                            className="mb-2"
+                            { ...props.searchProps }
+                        />
+                    </div>
+                </div>
+                <BootstrapTable
+                    classes="table-responsive-sm"
+                    bordered={ false }
+                    { ...props.baseProps }
+                />
+            </React.Fragment>
+        )
+    }
+    </ToolkitProvider>
+);