60 lines
1.6 KiB
JavaScript
Executable File
60 lines
1.6 KiB
JavaScript
Executable File
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-js/faker/locale/fr';
|
|
|
|
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>
|
|
);
|