react-bootstrap-table2/docs/cell-edit-props.html
2019-01-06 17:02:46 +08:00

87 lines
19 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<html lang="en"><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Cell Editing Props · react-bootstrap-table2</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="Cell Editing Props · react-bootstrap-table2"/><meta property="og:type" content="website"/><meta property="og:url" content="https://react-bootstrap-table.github.io/react-bootstrap-table2/index.html"/><meta property="og:description" content="Following we list all props for `cellEditFactory` from [`react-bootstrap-table2-editor`](https://www.npmjs.com/package/react-bootstrap-table2-editor)."/><link rel="shortcut icon" href="/react-bootstrap-table2/img/favicon.ico"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"/><link rel="alternate" type="application/atom+xml" href="https://react-bootstrap-table.github.io/blog/atom.xml" title="react-bootstrap-table2 Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://react-bootstrap-table.github.io/blog/feed.xml" title="react-bootstrap-table2 Blog RSS Feed"/><script type="text/javascript" src="https://buttons.github.io/buttons.js"></script><link rel="stylesheet" href="/react-bootstrap-table2/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-bootstrap-table2/"><img class="logo" src="/react-bootstrap-table2/img/logo/hybrid-white-large.svg"/></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/react-bootstrap-table2/docs/about.html" target="_self">Docs</a></li><li><a href="/react-bootstrap-table2/docs/table-props.html" target="_self">API</a></li><li><a href="/react-bootstrap-table2/en/help.html" target="_self">Help</a></li><li><a href="/react-bootstrap-table2/blog" target="_self">Blog</a></li><li><a href="https://github.com/react-bootstrap-table/react-bootstrap-table2" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container docsNavContainer" id="docsNav"><nav class="toc"><div class="toggleNav"><section class="navWrapper wrapper"><div class="navBreadcrumb wrapper"><div class="navToggle" id="navToggler"><i></i></div><h2><i></i><span>Cell Editing Definition</span></h2></div><div class="navGroups"><div class="navGroup navGroupActive"><h3>Table Definition</h3><ul><li class="navListItem"><a class="navItem" href="/react-bootstrap-table2/docs/table-props.html">BootstrapTable Props</a></li></ul></div><div class="navGroup navGroupActive"><h3>Column Definition</h3><ul><li class="navListItem"><a class="navItem" href="/react-bootstrap-table2/docs/column-props.html">Columns Props</a></li></ul></div><div class="navGroup navGroupActive"><h3>Cell Editing Definition</h3><ul><li class="navListItem navListItemActive"><a class="navItem navItemActive" href="/react-bootstrap-table2/docs/cell-edit-props.html">Cell Editing Props</a></li></ul></div><div class="navGroup navGroupActive"><h3>Pagination Definition</h3><ul><li class="navListItem"><a class="navItem" href="/react-bootstrap-table2/docs/pagination-props.html">Pagination Props</a></li></ul></div><div class="navGroup navGroupActive"><h3>Row Select Definition</h3><ul><li class="navListItem"><a class="navItem" href="/react-bootstrap-table2/docs/row-select-props.html">Row Selection Props</a></li></ul></div><div class="navGroup navGroupActive"><h3>Row Expand Definition</h3><ul><li class="navListItem"><a class="navItem" href="/react-bootstrap-table2/docs/row-expand-props.html">Row Expand Props</a></li></ul></div><div class="navGroup navGroupActive"><h3>Column Filter Definition</h3><ul><li class="navListItem"><a class="navItem" href="/react-bootstrap-table2/docs/filter-props.html">Column Filter Props</a></li></ul></div><div class="navGroup navGroupActive"><h3>Search Definition</h3><ul><li class="navListItem"><a class="navItem" href="/react-bootstrap-table2/docs/search-props.html">Search Props</a></li></ul></div><div class="navGroup navGroupActive"><h3>Export to CSV Definition</h3><ul><li class="navListItem"><a class="navItem" href="/react-bootstrap-table2/docs/export-csv-props.html">Export CSV Props</a></li></ul></div></div></section></div><script>
var toggler = document.getElementById('navToggler');
var nav = document.getElementById('docsNav');
toggler.onclick = function() {
nav.classList.toggle('docsSliderActive');
};
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><h1>Cell Editing Props</h1></header><article><div><span><p>Following we list all props for <code>cellEditFactory</code> from <a href="https://www.npmjs.com/package/react-bootstrap-table2-editor"><code>react-bootstrap-table2-editor</code></a>.</p>
<pre><code class="hljs css js"><span class="hljs-keyword">import</span> cellEditFactory <span class="hljs-keyword">from</span> <span class="hljs-string">'react-bootstrap-table2-editor'</span>;
<span class="hljs-keyword">const</span> cellEdit = cellEditFactory({
<span class="hljs-attr">mode</span>: <span class="hljs-string">'click'</span>,
...
});
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">BootstrapTable</span> <span class="hljs-attr">cellEdit</span>=<span class="hljs-string">{</span> <span class="hljs-attr">cellEdit</span> } <span class="hljs-attr">...</span> /&gt;</span>
</span></code></pre>
<h2><a class="anchor" aria-hidden="true" name="required"></a><a href="#required" 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>Required</h2>
<ul>
<li><a href="#celleditmode-string">mode (<strong>required</strong>)</a></li>
</ul>
<h2><a class="anchor" aria-hidden="true" name="optional"></a><a href="#optional" 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>Optional</h2>
<ul>
<li><a href="#celleditblurtosave-bool">blurToSave</a></li>
<li><a href="#celleditnoneditablerows-function">nonEditableRows</a></li>
<li><a href="#celledittimetoclosemessage-function">timeToCloseMessage</a></li>
<li><a href="#celleditautoselecttext-bool">autoSelectText</a></li>
<li><a href="#celleditbeforesavecell-function">beforeSaveCell</a></li>
<li><a href="#celleditaftersavecell-function">afterSaveCell</a></li>
<li><a href="#celleditonstartedit-function">onStartEdit</a></li>
<li><a href="#cellediterrormessage-string">errorMessage</a></li>
<li><a href="#celleditonerrormessagedisappear-function">onErrorMessageDisappear</a></li>
</ul>
<hr>
<h2><a class="anchor" aria-hidden="true" name="celleditmode-string"></a><a href="#celleditmode-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>cellEdit.mode - [String]</h2>
<p><code>cellEdit.mode</code> possible value is <code>click</code> and <code>dbclick</code>. <strong>It's required value</strong> that tell <code>react-bootstrap-table2</code> how to trigger the cell editing.</p>
<h2><a class="anchor" aria-hidden="true" name="celleditblurtosave-bool"></a><a href="#celleditblurtosave-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>cellEdit.blurToSave - [Bool]</h2>
<p>Default is <code>false</code>, enable it will be able to save the cell automatically when blur from the cell editor.</p>
<h2><a class="anchor" aria-hidden="true" name="celleditnoneditablerows-function"></a><a href="#celleditnoneditablerows-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>cellEdit.nonEditableRows - [Function]</h2>
<p><code>cellEdit.nonEditableRows</code> accept a callback function and expect return an array which used to restrict all the columns of some rows as non-editable. So the each item in return array should be rowkey(<code>keyField</code>)</p>
<h2><a class="anchor" aria-hidden="true" name="celledittimetoclosemessage-function"></a><a href="#celledittimetoclosemessage-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>cellEdit.timeToCloseMessage - [Function]</h2>
<p>If a <a href="./column-props.html#columnvalidator-function"><code>column.validator</code></a> defined and the new value is invalid, <code>react-bootstrap-table2</code> will popup a alert at the bottom of editor. <code>cellEdit.timeToCloseMessage</code> is a chance to let you decide how long the alert should be stay. Default is 3000 millisecond.</p>
<h2><a class="anchor" aria-hidden="true" name="celleditautoselecttext-bool"></a><a href="#celleditautoselecttext-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>cellEdit.autoSelectText - [Bool]</h2>
<p>Default is false, when enable it, <code>react-bootstrap-table2</code> will help you to select the text in the text input automatically when editing.</p>
<blockquote>
<p>NOTE: This props only work for <code>text</code> and <code>textarea</code>.</p>
</blockquote>
<h2><a class="anchor" aria-hidden="true" name="celleditbeforesavecell-function"></a><a href="#celleditbeforesavecell-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>cellEdit.beforeSaveCell - [Function]</h2>
<p>This callback function will be called before triggering cell update.</p>
<pre><code class="hljs css js"><span class="hljs-keyword">const</span> cellEdit = {
<span class="hljs-comment">// omit...</span>
beforeSaveCell: <span class="hljs-function">(<span class="hljs-params">oldValue, newValue, row, column</span>) =&gt;</span> { ... }
}
</code></pre>
<p>If you want to perform a async <code>beforeSaveCell</code>, you can do it like that:</p>
<pre><code class="hljs css js"><span class="hljs-keyword">const</span> cellEdit: {
<span class="hljs-comment">// omit...</span>
beforeSaveCell(oldValue, newValue, row, column, done) {
setTimeout(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
<span class="hljs-keyword">if</span> (confirm(<span class="hljs-string">'Do you want to accep this change?'</span>)) {
done(); <span class="hljs-comment">// contine to save the changes</span>
} <span class="hljs-keyword">else</span> {
done(<span class="hljs-literal">false</span>); <span class="hljs-comment">// reject the changes</span>
}
}, <span class="hljs-number">0</span>);
<span class="hljs-keyword">return</span> { <span class="hljs-attr">async</span>: <span class="hljs-literal">true</span> };
}
};
</code></pre>
<h2><a class="anchor" aria-hidden="true" name="celleditaftersavecell-function"></a><a href="#celleditaftersavecell-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>cellEdit.afterSaveCell - [Function]</h2>
<p>This callback function will be called after updating cell.</p>
<pre><code class="hljs css js"><span class="hljs-keyword">const</span> cellEdit = {
<span class="hljs-comment">// omit...</span>
afterSaveCell: <span class="hljs-function">(<span class="hljs-params">oldValue, newValue, row, column</span>) =&gt;</span> { ... }
};
</code></pre>
<h2><a class="anchor" aria-hidden="true" name="celleditonstartedit-function"></a><a href="#celleditonstartedit-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>cellEdit.onStartEdit - [Function]</h2>
<p>This callback function will be called after editor component mounted</p>
<pre><code class="hljs css js"><span class="hljs-keyword">const</span> cellEdit = {
<span class="hljs-comment">// omit...</span>
onStartEdit: <span class="hljs-function">(<span class="hljs-params">row, column, rowIndex, columnIndex</span>) =&gt;</span> { ... }
};
</code></pre>
<h2><a class="anchor" aria-hidden="true" name="cellediterrormessage-string"></a><a href="#cellediterrormessage-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>cellEdit.errorMessage - [String]</h2>
<p>This prop is not often used. Only used when you want to keep the error message in your application state and also handle the cell editing on <a href="./table-props.html#remote-bool-object"><code>remote</code></a> mode.</p>
<h2><a class="anchor" aria-hidden="true" name="celleditonerrormessagedisappear-function"></a><a href="#celleditonerrormessagedisappear-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>cellEdit.onErrorMessageDisappear - [Function]</h2>
<p>This callback function will be called when error message discard so that you can sync the newest error message to your state if you have.</p>
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="column-props.html">← Columns Props</a><a class="docs-next button" href="pagination-props.html">Pagination 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>