- No matches found
- No matches found
- No matches found
- No matches found
Title | Description |
---|---|
Index | Examples with checkbox, sort, pagination, export, detailView and other added features. |
From HTML | Use `data-toggle="table"` attribute to transform table from an existing, unformatted html table. In the example, we set `search` and `showColumns` options. |
From Data | Use `data` option to load the table data. |
From URL | Use `url` option to request data from remote site. |
No Data | No matching records found |
Modal Table | Use Bootstrap Table in a modal. We need to call `resetView` method after modal shown. |
Group Columns | Use `rowspan, colspan` attributes to set the group columns header. In this example, we set `showColumn` option. |
Sub Table | Supports sub tables with `detailView` option and `onExpandRow` event. |
Multiple Table | Multiple tables in one page. |
Flat Json | Support flat json, for example: `field: 'github.count.stargazers'`. |
Large Data | Use `virtualScroll` to enable the virtual scroll to play with large data sets (10000 rows). |
Vue Component | Use plugins: [Vue.js](https://vuejs.org) and `bootstrap-table` vue component. |
Title | Description |
---|---|
AJAX | Use `ajax` option to replace ajax call. Should implement the same API as jQuery ajax method. |
AJAX Options | Use `ajaxOptions` option to set the Additional options for submit ajax reques, for example we can use `beforeSend` option to send the custom request header. |
Basic Columns | Use `showColumns` to show the columns drop down list. |
Buttons Custom | Use `buttons` to add custom buttons which can be highly configured and sorted. |
Buttons Align | Use `buttonsAlign` option to indicate how to align the toolbar buttons. |
Buttons Attribute Title | Customize the title attribute of the toolbar buttons, which is mainly used to customize the toolbar style. |
Buttons Class | Use `buttonsClass: 'primary'` option to defines the class of table buttons. |
Buttons Order | Use `buttonsOrder` option to custom order of the toolbar buttons. |
Buttons Prefix | Use `buttonsPrefix: 'btn-sm btn'` option to defines the prefix of table buttons. |
Buttons Toolbar | Use `buttonsToolbar` option to indicates the custom buttons toolbar with a selector. |
Cache | Use `cache: false` option to disable caching of AJAX requests. |
Card View | Use `cardView` option to show card view table, for example mobile view. |
Checkbox Header | Use `checkboxHeader: false` option to hide check-all checkbox in header row. |
Click To Select | Use `clickToSelect` option to select checkbox or radiobox when clicking rows. |
Client Side Pagination | Use `sidePagination` to to define the client side pagination of table. |
Columns | Use `columns` option to define the table columns. |
Columns Search | Use `showColumnsSearch` to show a search for the columns filter. |
Columns Toggle All | Use `showColumnsToggleAll` to show a toggle all checkbox for the columns option. |
Content Type | Use `contentType` option to the contentType of request remote data, for example `application/x-www-form-urlencoded`. |
Custom Search | Use `customSearch` option to custom search function is executed instead of built-in search function. In this case, we only search the price column. |
Custom Sort | Use `customSort` option to custom sort by the number instead of string. |
Custom Toolbar | Use `toolbar` option to define the custom toolbars. |
Data Type | Use `dataType` option to set the type of data that you are expecting back from the server, for example `text`. In this case, we need to use `responseHandler` to handle the response data. |
Detail Filter | Use `detailFilter` option to enable expansion per row. |
Detail View | Use `detailView: true` to show detail view table. |
Detail View Align | Use `detailViewAlign` option to align the detail view icon. |
Detail View Icon | Use `detailViewIcon: false` and `detailViewByClick: true` options to hide the detail view column (plus/minus icon). |
Detail View Unique ID | Use `detailView: true` to show detail view table. |
Escape | Use `escape` option to Escapes a string for insertion into HTML, replacing &, <, >, ", `, and ' characters. |
Escape Title | Use `escapeTitle` to toggle the `escape` option for column titles. |
Filter Options | Use `filterOptions` option to define the default filter options of algorithm. In this case, we are using `bootstrapTable('filterBy', {id: 3, price: '$1'})`. |
Fixed Scroll | Set `true` to enable the fixed scrollbar position of the table when loading data. |
Footer Field | Use the `footerField` option to set the footer data key of the server response |
Footer Style | Use `footerStyle` option to set the footer style formatter function. |
Header Style | Use `headerStyle` option to set the header style formatter function. |
Height | Use `height` option to enable fixed header of table. |
Icon Size | Use `iconSize` option to defines icon size. |
Icons Prefix | Use `iconsPrefix` option to defines icon set name. In the case we use font-awesome instead of bootstrap-icons by default. |
Id Field | Use `idField: 'id'` option to indicate which field is an identity field, and use `btSelectItem: 'id'` to set the name of radio or checkbox input. |
Ignore Click To Select On | Use `ignoreClickToSelectOn` option to set the ignore elements `clickToSelect` on. |
Large Columns | Bootstrap table support large columns, it will auto to show the horizontal scroll bar. |
Locale | Use `locale` option to set the i18n. You need to include the locale file, in this example we include the locale-all file. |
Loading Font Size | Use `loadingFontSize` option to custom the loading font size of the loading text. |
Loading Template | Use `loadingTemplate` option to custom the loading type. |
Maintain Meta Data | Use `maintainMetaData` option to maintain the meta data(selected rows and hidden rows) on change page and search. |
Method | Use `method` option to the method type to request remote data, for example `method: 'post'.` |
Minimum Count Columns | Use `minimumCountColumns` option to the minimum number of columns to hide from the columns drop down list. |
Multiple Select Row | Use `multipleSelectRow` to select the multiple selection row. You can use the ctrl+click to select one row or shift+click to select a range of rows. |
Page List | Use `pageList` option to initialize the page size selecting list. |
Page Number | Use `pageNumber` option to initialize the page number. |
Page Size | Use `pageSize` option to initialize the page size. |
Pagination | Use `pagination` option to show a pagination toolbar on table bottom. |
Pagination H Align | Use `paginationHAlign` and `paginationDetailHAlign` options to align the pagination. |
Pagination Index Number | Use options to control the index number of the pagination. |
Pagination Load More | Use `paginationLoadMore` option to enable loading more data through pagination. |
Pagination Loop | Use `paginationLoop: false` option to disable pagination continuous loop mode. |
Pagination Parts | Use `paginationParts` option to define which parts of the pagination should be visible. |
Pagination Text | Use `paginationPreText` and `paginationNextText` option to indicate the previous and next buttons. |
Pagination V Align | Use `paginationVAlign` option to vertical align the pagination. |
Query Params | Use `queryParams` option to send additional parameters, in this case we send `search=8` to the server. |
Query Params Type | Use `queryParamsType` option to send the difference query params. |
Regex Search | Use the `regexSearch` option to enable the regex search. |
Remember Order | Use `rememberOrder` option to remember the order for each column. |
Response Handler | Use `responseHandler` option to handle the response data. |
Row Attributes | Use `rowAttributes` option to set the row attributes. You can hover the table row to view the example. |
Row Style | Use `rowStyle` option to set the row style. |
Search | Use `search` option to enable the search input. |
Searchable | Use `searchable` option to enable sending searchable (columns) parameters. |
Search Accent Neutralise | Can be used to remove accents from values for easier searching. In this case, you can try to search `Jose`. |
Search Align | Use `searchAlign: 'left'` option to indicate how to align the search input. |
Search Highlight | Use `searchHighlight` to highlight the searched text (using the `` html tag). |
Search On Enter Key | Use `searchOnEnterKey` option to enable the feature of search method will be executed until the Enter key is pressed. |
Search Selector | Use `searchSelector` to define a custom search input (e.g. `#customSearch`). |
Search Text | Use `searchText` option to initialize the search text. |
Search Time Out | Use `searchTimeOut` option to set timeout for search fire, in this case we set to `1000`. |
Server Side Pagination | Use `sidePagination: 'server'` option to define the server side pagination of table. |
Server Sort | Use `serverSort: false` option to sort the data in client when `sidePagination` is `server`, the default value is `true`. |
Show Button Icon | Use `showButtonIcons` to show icons on buttons. |
Show Button Text | Use `showButtonText` to show text on buttons. |
Show Extended Pagination | Use `showExtendedPagination` option to show a extended version of pagination (including the count of all rows with out filters). |
Show Footer | Use `showFooter` option to show the summary footer row. |
Show Fullscreen | Use `showFullscreen` option to show the fullscreen button. |
Show Header | Use `showHeader: false` option to hide the table header. |
Show Pagination Switch | Use `showPaginationSwitch` option to show the pagination switch button. |
Show Refresh | Use `showRefresh` option to show the refresh button. |
Show Search Button | Use `showSearchButton` to show a search Button behind the search input. |
Show Search Clear Button | Use `showSearchClearButton` to show a clear Button behind the search input. |
Show Toggle | Use `showToggle` option to show the toggle button to toggle table / card view. |
Silent Sort | Use `silentSort: false` option to sort the data with loading message, the default value is `true`. |
Single Select | Use `singleSelect` option to allow checkbox selecting only one row. |
Smart Display | Use `smartDisplay` option to display pagination or card view smartly. In this case you can see the changed of the page list. |
Sort Class | Use `sortClass` option to set the class name of the `td` elements which are sorted. |
Sort Empty Last | Use `sortEmptylast` to sort ` |
Sort Name Order | Use `sortName: 'name'` and `sortOrder: 'desc'` options to define which column and order will be sorted. |
Sort Reset | Use `sortReset` option to reset the sort on third click. |
Sort Reset Page | Use `sortResetPage` option to reset the page number when sorting. |
Sort Stable | Use `sortStable` option to get a stable sorting. |
Sortable | Use `sortable` option to set the basic sort, the default value is `true`. We can set `false` to disable `sortable` of all columns. |
Strict Search | Use `strictSearch` option to Enable the strict search. |
Table Icons | Use `icons` option to defines icons used in the toolbar, pagination, and details view. |
Toolbar Align | Use `toolbarAlign` option to indicate how to align the custom toolbar. |
Total Not Filtered Field | Use `totalNotFilteredField` option to set the field from the json response which will used for showExtendedPagination. |
Total/Data Field | Use `totalField` and `dataField` options to custom the response keys. In this case, we use `count` and `items` keys. |
Trim On Search | Use `trimOnSearch: false` option to disable trim spaces in search field. |
Undefined Text | Use `undefinedText` option to set `undefined` text. In this example, we set to `N/A`. |
Visible Search | Use `visibleSearch` to search only in visible column/data, if the data contains other values which are not displayed they will be ignored while searching. |
Title | Description |
---|---|
Aligning Columns | Use `align`, `halign` and `valign` options to set the alignment of the columns and their header. |
Aligning Footer | Use `falign` to set the alignment of the columns in the footer. |
Card Visible | Use `cardVisible` to to decide if the column is visible or not in the card view. |
Cell Style | Use `cellStyle` to define the style of a cell. |
Checkbox | Use `checkbox` to define that a column contains checkboxes. |
Checkbox Disabled | Use `checkbox` and `formatter` column option to disabled select input. |
Checkbox Enabled | Use `checkboxEnabled` to define if the checkboxes/radio are enabled or not. |
Class | Use `class` to define/overwrite css classes of the column. |
Click To Select | Use `clickToSelect` option to select checkbox or radiobox when clicking rows. In this case, we disable the Item Name column to click to select. |
Detail Formatter | Use `detailFormatter` to Format your detail view when `detailView` and `detailViewByClick` is set to `true`. Return a `String` and it will be appended into the detail view cell. |
Escape | Use `escape` to escape data (e.g. to prevent javascript injections). |
Events | Use `events` column option to define the events for the formatter column. |
Fields | Use `field` to define the table fields, the table fields are required for some actions e.g. the `load` method or the `formatter` option. |
Footer Formatter | Use `footerFormatter` to format the footer columns. |
Formatter | Use `formatter` column option to format the display of bootstrap table column. |
Natural Sorting | Use the [utils functions](https://github.com/wenzhixin/bootstrap-table-examples/tree/master/utils/natural-sorting) to allow natural sorting on columns. |
Radio | Use `radio` to define that a column contains radio(boxes). |
Rowspan Colspan | Use `rowspan, colspan` options to set the group columns header. |
Search Formatter | Use `searchFormatter` to define that the formatted data will be used while searching. You can search `Formatted` and `Price` to the difference. |
Search Highlight Formatter | Define a `function` to use a custom highlight formatter for the search highlight option. |
Searchable | Use `searchable` to define if a column can be found through searching. |
Show Select Title | Use `showSelectTitle` to show the title of column with radio or singleSelect checkbox option. |
Sort Name Order | Use `sortName, sortOrder` to define by which column the sort will be done. |
Sortable | Use `sortable` to define that the column can be sorted. |
Sorter | Use `sorter` column option to custom the sorter. |
Switchable | Use `switchable` to decide if the column is switchable or not. |
Title | Use `title` to define the name/title of the thead. (Default is name of the `field`) |
Title Tooltip | Use `titleTooltip` to define the title as tooltip (html attribute) of the thead. |
Visible | Use `visible` to decide if the column is visible or not. |
Width | Use `width` to define the column width. |
Width Unit | Use `widthUnit` to define the unit of the column width, it can be `%`, `'px'` or `'rem'` and so on. |
Title | Description |
---|---|
Append | Append the data to table: `$table.bootstrapTable('append', data)`. |
Check Invert | Invert check of current page rows: `$table.bootstrapTable('checkInvert')`. |
Check/Uncheck | Check/Uncheck a row, the row index start with 0: $table.bootstrapTable('check', 1) $table.bootstrapTable('uncheck', 1) . |
Check/Uncheck All | Check/Uncheck all current page rows: `$table.bootstrapTable('checkAll')` `$table.bootstrapTable('uncheckAll')`. |
Check/Uncheck By | Check/Uncheck rows by array of values: `$table.bootstrapTable('checkBy', {field: 'id', values: [1, 2, 3]})` `$table.bootstrapTable('uncheckBy', {field: 'id', values: [1, 2, 3]})`. |
Destroy | Destroy the bootstrap table: `$table.bootstrapTable('destroy')`. |
Expand/Collapse All Rows | `$table.bootstrapTable('expandAllRows')` `$table.bootstrapTable('collapseAllRows')`. |
Expand/Collapse Row by uniqueId | `$table.bootstrapTable('expandRowByUniqueId', 1)` `$table.bootstrapTable('collapseRowByUniqueId', 1)`. |
Expand/Collapse Row | `$table.bootstrapTable('expandRow', 1)` `$table.bootstrapTable('collapseRow', 1)`. |
Filter By | Filter data in table (can use only in client-side): `$table.bootstrapTable('filterBy', {id: [1, 2, 3]})`. The custom filter shows only entries which id devided through 4 has a rest of 0. |
Get Data | Get the loaded data of table: `$table.bootstrapTable('getData')`. |
Get Footer Data | Get the loaded data of the footer: `$table.bootstrapTable('getFooterData')`. |
Get Hidden Rows | Get all rows hidden and if you pass the show parameter true the rows will be shown again, otherwise, the method only will return the rows hidden: `$table.bootstrapTable('getHiddenRows')` `$table.bootstrapTable('getHiddenRows', true)`. |
Get Options | Return the options object: `$table.bootstrapTable('getOptions')`. |
Get Row By Unique Id | Get row data by unique id: `$table.bootstrapTable('getRowByUniqueId', 1)`. |
Get Scroll Position | Get the current scroll position, the unit is 'px': `$table.bootstrapTable('getScrollPosition')`. |
Get Selections | Return selected rows: `$table.bootstrapTable('getSelections')`. |
Get Visible/Hidden Columns | Get Visible/Hidden columns: `$table.bootstrapTable('getVisibleColumns')` `$table.bootstrapTable('getHiddenColumns')`. |
Insert Row | Insert a new row: `$table.bootstrapTable('insertRow', {index: 1, row: row})`. |
Load | Load the data to table, the old rows will be removed: `$table.bootstrapTable('load', data)`. |
Merge Cells | Merge some cells to one cell: `$table.bootstrapTable('mergeCells', {index: 1, field: 'name', colspan: 2, rowspan: 3})`. |
Prepend | Prepend the data to table: `$table.bootstrapTable('prepend', data)`. |
Refresh | Refresh the remote server data: `$table.bootstrapTable('refresh')`. |
Refresh Options | Refresh table options: `$table.bootstrapTable('refreshOptions', {})`. |
Remove | Remove data from table: `$table.bootstrapTable('remove', {field: 'id', values: ids})`. |
Remove All | Remove all data from table: `$table.bootstrapTable('removeAll')`. |
Remove By Unique Id | Remove row data by unique id: `$table.bootstrapTable('removeByUniqueId', 1)`. |
Reset Search | Set the search text: `$table.bootstrapTable('resetSearch')`. |
Reset View | Reset the bootstrap table view, for example reset the table height: `$table.bootstrapTable('resetView')`. |
Scroll To | Scroll to the number value position, set 'bottom' means scroll to the bottom: `$table.bootstrapTable('scrollTo', 0)` `$table.bootstrapTable('scrollTo', {unit: 'rows', value: index})` `$table.bootstrapTable('scrollTo', 'bottom')`. |
Select/Prev/Next Page | Go to the a specified/previous/next page: `$table.bootstrapTable('selectPage', 1)` `$table.bootstrapTable('prevPage')` `$table.bootstrapTable('nextPage')`. |
Show/Hide All Columns | Show/Hide all columns: `$table.bootstrapTable('showAllColumns')` `$table.bootstrapTable('hideAllColumns')`. |
Show/Hide Column | Show/Hide the specified column: `$table.bootstrapTable('showColumn', 'name')` `$table.bootstrapTable('hideColumn', 'name')`. |
Show/Hide Loading | Show/hide the loading: `$table.bootstrapTable('showLoading')` `$table.bootstrapTable('hideLoading')`. |
Show/Hide Row | Show/Hide the specified row: `$table.bootstrapTable('showRow', {index:1})` `$table.bootstrapTable('hideRow', {index:1})`. |
Sort By | Sort data in table: `$table.bootstrapTable('sortBy', {field: 'name', sortOrder: 'asc'})`. |
Sort reset | Resets sort state of the table regardless of whether caused by the user or programmatically. |
Toggle Detail View | Toggle the row if the detail view option is set: `$table.bootstrapTable('toggleDetailView', index)`. |
Toggle Fullscreen | Toggle Fullscreen: `$table.bootstrapTable('toggleFullscreen')`. |
Toggle Pagination | Toggle the pagination option: `$table.bootstrapTable('togglePagination')`. |
Toggle View | Toggle the card/table view: `$table.bootstrapTable('toggleView')`. |
Update By Unique Id | Update the specified row by unique id: `$table.bootstrapTable('updateByUniqueId', {id: 3, row: row})`. |
Update Cell | Update the specified cell: `$table.bootstrapTable('updateCell', {index: 1, field: 'name', value: 'Updated Name'})`. |
Update Cell By Unique Id | Update the specified cell by unique id: `$table.bootstrapTable('updateCellByUniqueId', {id: 3, field: 'name', value: 'Updated Name'})`. |
Update Column Title | Update the field title of column: `$table.bootstrapTable('updateColumnTitle', {field: 'name', title: 'Updated Name'})`. |
Update Format Text | Update the localizations format text: `$table.bootstrapTable('updateFormatText', 'formatSearch', 'Enter keywords...')`. |
Update Row | Update the specified row: `$table.bootstrapTable('updateRow', {index: 1, row: row})`. |
Title | Description |
---|---|
Auto Refresh | Use Plugin: bootstrap-table-auto-refresh to refresh the table. |
Cookie | Use Plugin: bootstrap-table-cookie to save the state of a table. |
Copy Rows | Use Plugin: bootstrap-table-copy-rows for copying selected rows to the clipboard. |
Custom View | Use Plugin: bootstrap-table-custom-view adds the ability to create a custom view to display the data. |
Defer Url | Use Plugin: bootstrap-table-defer-url. |
Export | Use Plugin: tableExport.jquery.plugin and bootstrap-table-export. |
Filter Control | Use Plugin: bootstrap-table-filter-control to filter table fields. |
Fixed Columns | Use Plugin: bootstrap-table-fixed-columns to enable the fixed columns feature. |
Group By V2 | Use Plugin: bootstrap-table-group-by-v2. |
I18n Enhance | Use Plugin: bootstrap-table-i18n-enhance. |
Key Events | Use Plugin: bootstrap-table-key-events. |
Mobile | Use Plugin: bootstrap-table-mobile to change the view between card and table view. |
Multiple Sort | Use Plugin: bootstrap-table-multiple-sort. |
Page Jump To | Use Plugin: bootstrap-table-jump-to to enable jump to page. |
Pipeline | Use Plugin: bootstrap-table-pipeline to enable pipeline feature. |
Use Plugin: bootstrap-table-print. | |
Reorder Columns | Use Plugin: dragtable and bootstrap-table-reorder-columns. |
Reorder Rows | Use Plugin: TableDnD and bootstrap-table-reorder-rows. |
Resizable | Use Plugin: jquery-resizable-columns and bootstrap-table-resizable. |
Sticky Header | User Plugin: bootstrap-table-sticky-header. An extension which provides a sticky header for the table when scrolling. |
Toolbar | Use Plugin: bootstrap-table-toolbar to allow the advanced search. |
Treegrid | Use Plugin: jquery-treegrid and bootstrap-table-treegrid. |
Title | Description |
---|---|
137. Refresh from url after use data option | Refresh from url after use data option(#137). |
152. How to pass parameter to server | How to pass parameter to server(#152 @61213273 ). |
177. The Multiple Fields in Column | The Multiple Fields in Column(#177.) |
188. Show Export button only | Show Export button only(#188). |
220. Hide state column | Hide state column(#220). |
221. Use cellStyle | Use cellStyle(#221). |
283. Use resetView to reset the header width | Use resetView to reset the header width(#283). |
337. Custom fontawsome icons | Custom fontawsome icons(#337). |
371. Using table content in a HTML form | Using table content in a HTML form(#371). |
383. Use Flat UI to style the checkboxes | Use Flat UI to style the checkboxes(#383.) |
386. Override default queryParam variables | Override default queryParam variables(#386). |
395. Enable/disable delete button on click checkbox | Enable/disable delete button on click checkbox(#395). |
406. Align the toolbar and search input | Align the toolbar and search input(#406). |
409. Refresh method with new url | Refresh method with new url(#409). |
415. Get checked row index | Get checked row index(#415). |
424. Toggle pagination | Toggle pagination (#424). |
431. Load pagination data | Load pagination data(#431). |
457. Set the global defaults for the table | Set the global defaults for the table(#457). |
563. Change the background color on selected rows | Change the background color on selected rows (#563). |
579. Show images formatter | Show images formatter (#579). |
639. Footer resizing problem. | Footer resizing problem.(#639). |
917. Maintain selected on server side. | Maintain selected on server side.(#917). |
986. Editable select box | Editable select box(#986). |
987. Save row data using input. | Save row data using input.(#987). |
1167. Check/Uncheck All in all page with client side | Check/Uncheck All in all page with client side(#1167). |
2211. Rotated table column headers | Rotated table column headers(#2211). |
2619. Click sort with html Checkbox | Click sort with html Checkbox(#2619). |
3345. Check/Uncheck All in all page with server side | Check/Uncheck All in all page with server side(#3345). |
3784. Overwrite the table scrollbar | Overwrite the table scrollbar(#3784). |
3830. Export all records with server side pagination | Export all records with server side pagination(#3830). |
3949. Multiple group header and large columns | Multiple group header and large columns(#3949). |
4210. Get table full url | Get table full url(#4210). |
4214. Added index field | Added index field.(#4214). |
4586. Customize data attribute of td | Customize data attribute of td.(#4586). |
xxxxxxxxxx
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table-vue.min.js"></script>
<div id="table">
<bootstrap-table :columns="columns" :data="data" :options="options"></bootstrap-table>
</div>
<script>
const tableMixin = {
data () {
return {
vueFormatters: []
}
},
methods: {
vueFormatter (obj) {
const key = `_vue_formatter_${this.vueFormatters.length}`
this.vueFormatters.push({
el: `.${key}`,
name: key,
...obj
})