20190218 release

2026-07-01 14:40:02 +00:00 · 2019-02-17 23:42:06 +08:00
parent b1e6bd05ab
commit e5bfaca33d
9 changed files with 240 additions and 72 deletions
--- a/docs/basic-column-toggle.md
+++ b/docs/basic-column-toggle.md
@@ -0,0 +1,123 @@
+---
+id: basic-column-toggle
+title: Column Toggle
+sidebar_label: Column Toggle
+---
+
+`react-bootstrap-table2` support a toggle list for user to toggle the column visibility.
+
+**[Live Demo For Column Toggle](../storybook/index.html?selectedKind=Column%20Toggle)**  
+
+-----
+
+## Prepare
+
+Please check [How to start with table toolkit](./toolkits-getting-started.html)
+
+
+## Enable Column Toggle
+
+```js
+import ToolkitProvider, { ColumnToggle } from 'react-bootstrap-table2-toolkit';
+
+const { ToggleList } = ColumnToggle;
+//...
+
+<ToolkitProvider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  columnToggle
+>
+  {
+    props => (
+      <div>
+        <ToggleList { ...props.columnToggleProps } />
+        <hr />
+        <BootstrapTable
+          { ...props.baseProps }
+        />
+      </div>
+    )
+  }
+</ToolkitProvider>
+```
+
+1. Enable column toggle via `columnToggle` prop on `ToolkitProvider`.
+
+2. `ToolkitProvider` is a wrapper of react context, you should wrap the `BootstrapTable` and `ToggleList` as the child of `ToolkitProvider`.
+
+3. Rendering `ToggleList` with `columnToggleProps`. The position of `ToggleList` is depends on you.
+
+
+## Customize ToggleList Component
+
+So far we only have limited customization on `ToggleList` component, following props is available for you:
+
+* `btnClassName`: Add custom class on toggle button.
+* `className`: Add custom class on toggle list.
+* `contextual`: config bootstrap contextual, default is `primary`.
+
+However, you can custom the whole thing by yourself like following:
+
+```js
+// This is my custom column toggle component
+
+const CustomToggleList = ({
+  columns,
+  onColumnToggle,
+  toggles
+}) => (
+  <div className="btn-group btn-group-toggle btn-group-vertical" data-toggle="buttons">
+    {
+      columns
+        .map(column => ({
+          ...column,
+          toggle: toggles[column.dataField]
+        }))
+        .map(column => (
+          <button
+            type="button"
+            key={ column.dataField }
+            className={ `btn btn-warning ${column.toggle ? 'active' : ''}` }
+            data-toggle="button"
+            aria-pressed={ column.toggle ? 'true' : 'false' }
+            onClick={ () => onColumnToggle(column.dataField) }
+          >
+            { column.text }
+          </button>
+        ))
+    }
+  </div>
+);
+
+export const MyTable = () => (
+    <ToolkitProvider
+      keyField="id"
+      data={ products }
+      columns={ columnsdt }
+      columnToggle
+    >
+      {
+        props => (
+          <div>
+            <CustomToggleList { ...props.columnToggleProps } />
+            <hr />
+            <BootstrapTable
+              { ...props.baseProps }
+            />
+          </div>
+        )
+      }
+    </ToolkitProvider>
+);
+```
+
+Following, we just explain how it work:   
+
+`ToolkitProvider` will pass a props which have a property called `columnToggleProps`. `columnToggleProps` have following properties: 
+
+* `columns`: Column list
+* `toggles`: An object which describe current column visibilities. `true` is on and `false` is off.
+* `onColumnToggle`: Call this method when user toggle a column.
+