<f7-block-title>With inputs</f7-block-title>

<div class="block-header">Such tables are widely used in admin interfaces for filtering or search data</div>

<div class="card data-table">

<table>

<thead>

<tr>

<th class="input-cell">

<span class="table-head-label">ID</span>

<div class="input" style="width: 50px">

<input type="number" placeholder="Filter">

</div>

</th>

<th class="input-cell">

<span class="table-head-label">Name</span>

<div class="input">

<input type="text" placeholder="Filter">

</div>

</th>

<th class="input-cell">

<span class="table-head-label">Email</span>

<div class="input">

<input type="email" placeholder="Filter">

</div>

</th>

<th class="input-cell">

<span class="table-head-label">Gender</span>

<div class="input input-dropdown">

<select>

<option value="All">All</option>

<option value="Male">Male</option>

<option value="Female">Female</option>

</select>

</div>

</th>

</tr>

</thead>

<tbody>

<tr>

<td>1</td>

<td>John Doe</td>

<td>john@doe.com</td>

<td>Male</td>

</tr>

<tr>

<td>2</td>

<td>Jane Doe</td>

<td>jane@doe.com</td>

<td>Female</td>

</tr>

<tr>

<td>3</td>

<td>Vladimir Kharlampidi</td>

<td>vladimir@google.com</td>

<td>Male</td>

</tr>

<tr>

<td>4</td>

<td>Jennifer Doe</td>

<td>jennifer@doe.com</td>

<td>Female</td>

</tr>

</tbody>

</table>

</div>