mirror of
https://github.com/gosticks/react-bootstrap-table2.git
synced 2025-10-16 11:55:39 +00:00
add overlay docs
This commit is contained in:
parent
23c914c3b4
commit
6ce915fa70
19
docs/overlay.md
Normal file
19
docs/overlay.md
Normal file
@ -0,0 +1,19 @@
|
||||
---
|
||||
id: overlay
|
||||
title: Remote Loading/Overlay
|
||||
sidebar_label: Overlay
|
||||
---
|
||||
|
||||
In `react-bootstrap-table2`, you will be easier to custom the loading or lverlay on table no matter if remote enabled or not. In the following, we have two way to do it:
|
||||
|
||||
-----
|
||||
|
||||
## Empty Table
|
||||
[**`noDataIndication`**](./table-props.html#nodataindication-function) is a simple case you can take it, if current data size is empty, `react-bootstrap-table2` will call the `noDataIndication` prop and get the result to display on the table.
|
||||
|
||||
[**Here**](../storybook/index.html?selectedKind=EmptyTableOverlay) is a quick exmaple for `noDataIndication`.
|
||||
|
||||
## Loading Table
|
||||
In the most of case for remote mode, you need the loading animation to tell the user the table is loading or doing some action in the background. Hence, you can lervarge [**`overlay`**](./table-props.html#overlay-function) prop.
|
||||
|
||||
[**Here**](../storybook/index.html?selectedKind=EmptyTableOverlay) is also a example for `overlay`
|
||||
@ -9,6 +9,7 @@ title: BootstrapTable Props
|
||||
|
||||
## Optional
|
||||
* [remote](#remote-bool-object)
|
||||
* [noDataIndication](#nodataindication-function)
|
||||
* [loading](#loading-bool)
|
||||
* [overlay](#overlay-function)
|
||||
* [caption](#caption-string-node)
|
||||
@ -64,6 +65,9 @@ remote={ { pagination: true, filter: false, sort: false } }
|
||||
|
||||
There'r a apecial case for remote pagination, even you only specified the paignation need to handle as remote, `react-bootstrap-table2` will handle all the table changes(filter, sort etc) as remote mode, because `react-bootstrap-table2` only know the data of current page, but filtering, searching or sort need to work on overall datas.
|
||||
|
||||
## noDataIndication - [Function]
|
||||
`noDataIndication` should be a callback function which return anything that will be showed in the table when data is **empty**.
|
||||
|
||||
## loading - [Bool]
|
||||
Telling if table is loading or not, for example: waiting data loading, filtering etc. It's **only** valid when [`remote`](#remote-bool-object) is enabled.
|
||||
When `loading` is `true`, `react-bootstrap-table2` will attend to render a overlay on table via [`overlay`](#overlay-function) prop, if [`overlay`](#overlay-function) prop is not given, `react-bootstrap-table2` will ignore the overlay rendering.
|
||||
|
||||
@ -27,6 +27,8 @@
|
||||
"filter-props": "Column Filter Props",
|
||||
"getting-started": "Getting Started",
|
||||
"Getting Started": "Getting Started",
|
||||
"overlay": "Remote Loading/Overlay",
|
||||
"Overlay": "Overlay",
|
||||
"pagination-props": "Pagination Props",
|
||||
"row-select-props": "Row Selection Props",
|
||||
"table-props": "BootstrapTable Props",
|
||||
|
||||
@ -14,7 +14,8 @@
|
||||
"basic-pagination"
|
||||
],
|
||||
"Remote Table": [
|
||||
"basic-remote"
|
||||
"basic-remote",
|
||||
"overlay"
|
||||
]
|
||||
},
|
||||
"api": {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user