vhad/react-bootstrap-table2
1
0
Fork 0
mirror of https://github.com/gosticks/react-bootstrap-table2.git synced 2026-10-07 10:36:54 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

20190610 release

Browse Source
This commit is contained in:
AllenFang
2019-06-10 20:50:40 +08:00
parent 218aca4dea
commit 6d2f7af414
61 changed files with 319 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/row-select-props.html
+38
View File
@@ -28,11 +28,13 @@
<li><a href="#selectrowclicktoedit-bool">clickToEdit</a></li>
<li><a href="#selectrowonselect-function">onSelect</a></li>
<li><a href="#selectrowonselectall-function">onSelectAll</a></li>
<li><a href="#selectrowselectcolumnposition-string">selectColumnPosition</a></li>
<li><a href="#selectrowhideselectcolumn-bool">hideSelectColumn</a></li>
<li><a href="#selectrowhideselectall-bool">hideSelectAll</a></li>
<li><a href="#selectrowselectionrenderer-function">selectionRenderer</a></li>
<li><a href="#selectrowselectionheaderrenderer-function">selectionHeaderRenderer</a></li>
<li><a href="#selectrowheadercolumnstyle-object-function">headerColumnStyle</a></li>
<li><a href="#selectrowselectcolumnstyle-object-function">selectColumnStyle</a></li>
</ul>
<hr>
<h2><a class="anchor" aria-hidden="true" name="selectrowmode-string"></a><a href="#selectrowmode-string" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>selectRow.mode - [String]</h2>
@@ -177,6 +179,13 @@
}
};
</code></pre>
<h2><a class="anchor" aria-hidden="true" name="selectrowselectcolumnposition-string"></a><a href="#selectrowselectcolumnposition-string" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>selectRow.selectColumnPosition - [String]</h2>
<p>Default is <code>left</code>. You can give this as <code>right</code> for rendering selection column in the right side.</p>
<pre><code class="hljs css js"><span class="hljs-keyword">const</span> selectRow = {
<span class="hljs-attr">mode</span>: <span class="hljs-string">'checkbox'</span>,
<span class="hljs-attr">selectColumnPosition</span>: <span class="hljs-string">'right'</span>
};
</code></pre>
<h2><a class="anchor" aria-hidden="true" name="selectrowhideselectcolumn-bool"></a><a href="#selectrowhideselectcolumn-bool" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>selectRow.hideSelectColumn - [Bool]</h2>
<p>Default is <code>false</code>, if you don't want to have a selection column, give this prop as <code>true</code></p>
<pre><code class="hljs css js"><span class="hljs-keyword">const</span> selectRow = {
@@ -228,4 +237,33 @@
)
};
</code></pre>
<h2><a class="anchor" aria-hidden="true" name="selectrowselectcolumnstyle-object-function"></a><a href="#selectrowselectcolumnstyle-object-function" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>selectRow.selectColumnStyle - [Object | Function]</h2>
<p>A way to custome the selection cell. <code>selectColumnStyle</code> not only accept a simple style object but also a callback function for more flexible customization:</p>
<h3><a class="anchor" aria-hidden="true" name="style-object"></a><a href="#style-object" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Style Object</h3>
<pre><code class="hljs css js"><span class="hljs-keyword">const</span> selectRow = {
<span class="hljs-attr">mode</span>: <span class="hljs-string">'checkbox'</span>,
<span class="hljs-attr">selectColumnStyle</span>: { <span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">'blue'</span> }
};
</code></pre>
<h3><a class="anchor" aria-hidden="true" name="callback-function"></a><a href="#callback-function" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Callback Function</h3>
<p>If a callback function present, you can get below information to custom the selection cell:</p>
<ul>
<li><code>checked</code>: Whether current row is seleccted or not</li>
<li><code>disabled</code>: Whether current row is disabled or not</li>
<li><code>rowIndex</code>: Current row index</li>
<li><code>rowKey</code>: Current row key</li>
</ul>
<pre><code class="hljs css js"><span class="hljs-keyword">const</span> selectRow = {
<span class="hljs-attr">mode</span>: <span class="hljs-string">'checkbox'</span>,
<span class="hljs-attr">selectColumnStyle</span>: ({
checked,
disabled,
rowIndex,
rowKey
}) =&gt; (
<span class="hljs-comment">// ....</span>
<span class="hljs-keyword">return</span> { <span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">'blue'</span> };
)
};
</code></pre>
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="pagination-props.html">← Pagination Props</a><a class="docs-next button" href="row-expand-props.html">Row Expand Props →</a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-bootstrap-table2/" class="nav-home"></a><div><h5>Docs</h5><a href="/react-bootstrap-table2/docs/en/getting-started.html">Getting Started</a><a href="/react-bootstrap-table2/docs/en/table-props.html">API References</a></div><div><h5>Community</h5><a href="https://stackoverflow.com/questions/tagged/react-bootstrap-table" target="_blank">Stack Overflow</a><a href="https://discordapp.com/">Project Chat</a><a href="https://twitter.com/" target="_blank">Twitter</a></div><div><h5>More</h5><a href="/react-bootstrap-table2/blog/index.html">Blog</a><a href="https://github.com/react-bootstrap-table/react-bootstrap-table2">GitHub</a><a class="github-button" href="https://github.com/react-bootstrap-table/react-bootstrap-table2" data-icon="octicon-star" data-count-href="/facebook/docusaurus/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><section class="copyright">Copyright © 2019 react-bootstrap-table2.</section></footer></div></body></html>