<p dir="auto">Continuing from <a href="https://github.com/callemall/material-ui/issues/1789#issuecomment-283587612" data-hovercard-type="issue" data-hovercard-url="/mui/material-ui/issues/1789/hovercard">here</a>.</p>
<h3 dir="auto">Problem description</h3>
<p dir="auto">The <code class="notranslate">Text</code> component in the <code class="notranslate">next</code> branch causes a naming collision with the global <a href="https://developer.mozilla.org/en-US/docs/Web/API/Text" rel="nofollow">Text</a> that is available in browsers.</p>
<p dir="auto">To avoid confusion and misleading errors it might be better to choose a different name.</p>
<p dir="auto">Some ideas so far: <code class="notranslate">Typography</code>, <code class="notranslate">Font</code>. The former probably makes the connection to the <a href="https://material.io/guidelines/style/typography.html" rel="nofollow">MD guidelines</a> a bit clearer, despite being a bit more wordy.</p>
<h3 dir="auto">Versions</h3>
<ul dir="auto">
<li>Material-UI: <code class="notranslate">next</code> branch</li>
<li>React: All</li>
<li>Browser: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Text#Browser_compatibility" rel="nofollow">All</a></li>
</ul>
<p dir="auto">I would like to store the selected rows (ie boxes that are checked) in state, so that I can filter/manipulate the table data whilst still keeping the boxes selected.</p>
<p dir="auto">I attempted this using <code class="notranslate">onRowSelection</code> and setting state, then triggering <code class="notranslate">selected={true}</code> on table row:</p>
<p dir="auto"><code class="notranslate">&lt;TableRow selected={selected.includes(index)&gt;</code></p>
<p dir="auto">However, it still would not store the checked boxes</p>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/mui-org/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">Keep the correct boxes checked even when the table data changes</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Boxes clear if the table data changes</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">Working sample available here:<br>
<a href="https://codesandbox.io/s/jnznoy8o4w" rel="nofollow">https://codesandbox.io/s/jnznoy8o4w</a></p>
<p dir="auto">Steps:</p>
<ol dir="auto">
<li>Check several boxes</li>
<li>Search for data</li>
<li>Notice that the data changes, and check boxes are now all cleared</li>
</ol>
<h2 dir="auto">Context</h2>
<p dir="auto">I would like store the a list of which items are checked. For example [1,3,5] would show rows 1, 3, and 5 as checked.</p>
<h2 dir="auto">Your Environment</h2>
<p dir="auto">Codesandbox</p>
<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>Latest</td>
</tr>
<tr>
<td>React</td>
<td>Latest</td>
</tr>
<tr>
<td>browser</td>
<td>Codesandbox</td>
</tr>
</tbody>
</table>