Security News
The Push to Ban Ransom Payments Is Gaining Momentum
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
react-bootstrap-table2-toolkit
Advanced tools
Readme
react-bootstrap-table2
support some additional features in react-bootstrap-table2-toolkit
.
In the future, this toolkit will support other feature like row delete, insert etc. Right now we only following features:
Live Demo For Table Search Live Demo For Export CSV Live Demo For Column Toggle
$ npm install react-bootstrap-table2-toolkit --save
// es5
require('react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css');
// es6
import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
const { SearchBar } = Search;
//...
<ToolkitProvider
keyField="id"
data={ products }
columns={ columns }
search
>
{
props => (
<div>
<h3>Input something at below input field:</h3>
<SearchBar { ...props.searchProps } />
<hr />
<BootstrapTable
{ ...props.baseProps }
/>
</div>
)
}
</ToolkitProvider>
You have to enable the search functionality via search
prop on ToolkitProvider
.
ToolkitProvider
is a wrapper of react context, you are supposed to wrap the BootstrapTable
and SearchBar
as the child of ToolkitProvider
You should render SearchBar
with searchProps
as well. The position of SearchBar
is depends on you.
SearchBar
PropsCustom the class on input element.
Custom the placeholder on input element.
Custom the style on input element.
milionsecond for debounce user input.
Accept a string that will be used for default searching when first time table render.
<ToolkitProvider
keyField="id"
data={ products }
columns={ columns }
search={ {
defaultSearch: 'search something here'
} }
>
// ...
</ToolkitProvider>
If you want to search on the formatted data, you are supposed to enable this props. react-bootstrap-table2
will check if you define the column.formatter
when doing search.
<ToolkitProvider
keyField="id"
data={ products }
columns={ columns }
search={ {
searchFormatted: true
} }
>
// ...
</ToolkitProvider>
We have a built-in clear search function which allow user clear search status via clicking button:
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
const { SearchBar, ClearSearchButton } = Search;
<ToolkitProvider
keyField="id"
data={ products }
columns={ columns }
search
>
{
props => (
<div>
<SearchBar { ...props.searchProps } />
<ClearSearchButton { ...props.searchProps } />
....
</div>
)
}
</ToolkitProvider>
There are two steps to enable the export CSV functionality:
exportCSV
prop as true
on ToolkitProvider
.ExportCSVButton
with csvProps
. The position of ExportCSVButton
is depends on you.import ToolkitProvider, { CSVExport } from 'react-bootstrap-table2-toolkit';
const { ExportCSVButton } = CSVExport;
<ToolkitProvider
keyField="id"
data={ products }
columns={ columns }
exportCSV
>
{
props => (
<div>
<ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
<hr />
<BootstrapTable { ...props.baseProps } />
</div>
)
}
</ToolkitProvider>
Custom the csv file name.
Custom the csv file separator.
Default is false
. Give true to avoid to attach the csv header.
Default is true
.
Default is true
. false
will only export current data which display on table.
Default is false
. true
will only export the data which is selected.
Default is false
. true
will only export the data which is filtered/searched.
When you configure this prop as true, you must turn off
exportAll
.
Let's see how to render the column toggle in your react component:
import BootstrapTable from 'react-bootstrap-table-next';
import ToolkitProvider, { ColumnToggle } from 'react-bootstrap-table2-toolkit';
<ToolkitProvider
keyField="id"
data={ products }
columns={ columns }
columnToggle
>
{
props => (
<div>
<ToggleList { ...props.columnToggleProps } />
<hr />
<BootstrapTable
{ ...props.baseProps }
/>
</div>
)
}
</ToolkitProvider>
columnToggleProps
props have enough information to let you custom the toggle list: [demo](Live Demo For Export CSV)
If you want to have default visibility on specified column, you can just give true
or false
on column.hidden
.
FAQs
The toolkit for react-bootstrap-table2
We found that react-bootstrap-table2-toolkit demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
Application Security
New SEC disclosure rules aim to enforce timely cyber incident reporting, but fear of job loss and inadequate resources lead to significant underreporting.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).