Dynamic Table

Global settings for your all your grids

Full dynamic table

The full featured dynamic table includes search, pagination and sortable columns.

ID Name Type of user
1 Aaron Admin
2 Abbott Regular
3 Abel Editor
4 Abner Admin
5 Benedict Regular
6 Benjamin Editor
7 Bernard Admin
8 Blaine Regular
9 Carney Editor
10 Chandler Admin
11 Charles Regular
12 Coleman Editor
13 date 1 Admin
14 Dalton Regular
15 Darian Editor
16 Dexter Admin
17 Elton Regular
18 Ernest Editor
19 date 1 Admin
20 Fox Regular
21 Frasier Editor
22 Gabriel Admin
23 Garrick Regular
24 Gilbert Editor
25 Igor Admin
26 Isaiah Regular
27 Jacob Editor
28 Keegan Admin
29 Kendall Regular
30 Lancelot Editor
<table class="table" data-fc-modules="table-dynamic">
	<thead>
		<tr>
			<th class="w-10">ID</th>
			<th>Name</th>
			<th>Type of user</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td class="align-left">1</td>
			<td>Aaron</td>
			<td>Admin</td>
		</tr>
		<tr>
			<td class="align-left">2</td>
			<td>Abbott</td>
			<td>Regular</td>
		</tr>
		<tr>
			<td class="align-left">3</td>
			<td>Abel</td>
			<td>Editor</td>
		</tr><tr>
			<td class="align-left">4</td>
			<td>Abner</td>
			<td>Admin</td>
		</tr>
		<tr>
			<td class="align-left">5</td>
			<td>Benedict</td>
			<td>Regular</td>
		</tr>
		<tr>
			<td class="align-left">6</td>
			<td>Benjamin</td>
			<td>Editor</td>
		</tr><tr>
			<td class="align-left">7</td>
			<td>Bernard</td>
			<td>Admin</td>
		</tr>
		<tr>
			<td class="align-left">8</td>
			<td>Blaine</td>
			<td>Regular</td>
		</tr>
		<tr>
			<td class="align-left">9</td>
			<td>Carney</td>
			<td>Editor</td>
		</tr><tr>
			<td class="align-left">10</td>
			<td>Chandler</td>
			<td>Admin</td>
		</tr>
		<tr>
			<td class="align-left">11</td>
			<td>Charles</td>
			<td>Regular</td>
		</tr>
		<tr>
			<td class="align-left">12</td>
			<td>Coleman</td>
			<td>Editor</td>
		</tr><tr>
			<td class="align-left">13</td>
			<td>date 1</td>
			<td>Admin</td>
		</tr>
		<tr>
			<td class="align-left">14</td>
			<td>Dalton</td>
			<td>Regular</td>
		</tr>
		<tr>
			<td class="align-left">15</td>
			<td>Darian</td>
			<td>Editor</td>
		</tr><tr>
			<td class="align-left">16</td>
			<td>Dexter</td>
			<td>Admin</td>
		</tr>
		<tr>
			<td class="align-left">17</td>
			<td>Elton</td>
			<td>Regular</td>
		</tr>
		<tr>
			<td class="align-left">18</td>
			<td>Ernest</td>
			<td>Editor</td>
		</tr><tr>
			<td class="align-left">19</td>
			<td>date 1</td>
			<td>Admin</td>
		</tr>
		<tr>
			<td class="align-left">20</td>
			<td>Fox</td>
			<td>Regular</td>
		</tr>
		<tr>
			<td class="align-left">21</td>
			<td>Frasier</td>
			<td>Editor</td>
		</tr><tr>
			<td class="align-left">22</td>
			<td>Gabriel</td>
			<td>Admin</td>
		</tr>
		<tr>
			<td class="align-left">23</td>
			<td>Garrick</td>
			<td>Regular</td>
		</tr>
		<tr>
			<td class="align-left">24</td>
			<td>Gilbert</td>
			<td>Editor</td>
		</tr><tr>
			<td class="align-left">25</td>
			<td>Igor</td>
			<td>Admin</td>
		</tr>
		<tr>
			<td class="align-left">26</td>
			<td>Isaiah</td>
			<td>Regular</td>
		</tr>
		<tr>
			<td class="align-left">27</td>
			<td>Jacob</td>
			<td>Editor</td>
		</tr><tr>
			<td class="align-left">28</td>
			<td>Keegan</td>
			<td>Admin</td>
		</tr>
		<tr>
			<td class="align-left">29</td>
			<td>Kendall</td>
			<td>Regular</td>
		</tr>
		<tr>
			<td class="align-left">30</td>
			<td>Lancelot</td>
			<td>Editor</td>
		</tr>
	</tbody>
</table>

Sort dynamic table

You can deactivate some of the features if you don't need, and for example just a sortable table

ID Name Type of user
1 Aaron Admin
2 Abbott Regular
3 Abel Editor
4 Abner Admin
5 Benedict Regular
6 Benjamin Editor
7 Bernard Admin
8 Blaine Regular
9 Carney Editor
10 Chandler Admin
11 Charles Regular
12 Coleman Editor
13 date 1 Admin
14 Dalton Regular
15 Darian Editor
16 Dexter Admin
17 Elton Regular
18 Ernest Editor
19 date 1 Admin
20 Fox Regular
21 Frasier Editor
22 Gabriel Admin
23 Garrick Regular
24 Gilbert Editor
25 Igor Admin
26 Isaiah Regular
27 Jacob Editor
28 Keegan Admin
29 Kendall Regular
30 Lancelot Editor
<table class="table" data-fc-modules="table-dynamic" data-fc-pagination="false" data-fc-search="false">
	<thead>
		<tr>
			<th class="w-10">ID</th>
			<th>Name</th>
			<th>Type of user</th>
		</tr>
	</thead>
	<tbody>
	<tr>
		<td class="align-left">1</td>
		<td>Aaron</td>
		<td>Admin</td>
	</tr>
	<tr>
		<td class="align-left">2</td>
		<td>Abbott</td>
		<td>Regular</td>
	</tr>
	<tr>
		<td class="align-left">3</td>
		<td>Abel</td>
		<td>Editor</td>
	</tr><tr>
		<td class="align-left">4</td>
		<td>Abner</td>
		<td>Admin</td>
	</tr>
	<tr>
		<td class="align-left">5</td>
		<td>Benedict</td>
		<td>Regular</td>
	</tr>
	<tr>
		<td class="align-left">6</td>
		<td>Benjamin</td>
		<td>Editor</td>
	</tr><tr>
		<td class="align-left">7</td>
		<td>Bernard</td>
		<td>Admin</td>
	</tr>
	<tr>
		<td class="align-left">8</td>
		<td>Blaine</td>
		<td>Regular</td>
	</tr>
	<tr>
		<td class="align-left">9</td>
		<td>Carney</td>
		<td>Editor</td>
	</tr><tr>
		<td class="align-left">10</td>
		<td>Chandler</td>
		<td>Admin</td>
	</tr>
	<tr>
		<td class="align-left">11</td>
		<td>Charles</td>
		<td>Regular</td>
	</tr>
	<tr>
		<td class="align-left">12</td>
		<td>Coleman</td>
		<td>Editor</td>
	</tr><tr>
		<td class="align-left">13</td>
		<td>date 1</td>
		<td>Admin</td>
	</tr>
	<tr>
		<td class="align-left">14</td>
		<td>Dalton</td>
		<td>Regular</td>
	</tr>
	<tr>
		<td class="align-left">15</td>
		<td>Darian</td>
		<td>Editor</td>
	</tr><tr>
		<td class="align-left">16</td>
		<td>Dexter</td>
		<td>Admin</td>
	</tr>
	<tr>
		<td class="align-left">17</td>
		<td>Elton</td>
		<td>Regular</td>
	</tr>
	<tr>
		<td class="align-left">18</td>
		<td>Ernest</td>
		<td>Editor</td>
	</tr><tr>
		<td class="align-left">19</td>
		<td>date 1</td>
		<td>Admin</td>
	</tr>
	<tr>
		<td class="align-left">20</td>
		<td>Fox</td>
		<td>Regular</td>
	</tr>
	<tr>
		<td class="align-left">21</td>
		<td>Frasier</td>
		<td>Editor</td>
	</tr><tr>
		<td class="align-left">22</td>
		<td>Gabriel</td>
		<td>Admin</td>
	</tr>
	<tr>
		<td class="align-left">23</td>
		<td>Garrick</td>
		<td>Regular</td>
	</tr>
	<tr>
		<td class="align-left">24</td>
		<td>Gilbert</td>
		<td>Editor</td>
	</tr><tr>
		<td class="align-left">25</td>
		<td>Igor</td>
		<td>Admin</td>
	</tr>
	<tr>
		<td class="align-left">26</td>
		<td>Isaiah</td>
		<td>Regular</td>
	</tr>
	<tr>
		<td class="align-left">27</td>
		<td>Jacob</td>
		<td>Editor</td>
	</tr><tr>
		<td class="align-left">28</td>
		<td>Keegan</td>
		<td>Admin</td>
	</tr>
	<tr>
		<td class="align-left">29</td>
		<td>Kendall</td>
		<td>Regular</td>
	</tr>
	<tr>
		<td class="align-left">30</td>
		<td>Lancelot</td>
		<td>Editor</td>
	</tr>
	</tbody>
</table>

Attributes

data-fc-pagination

If you set this to false then the pagination and the show rows selector will not be called.

DEFAULT: true

data-fc-sort

If you set this to false then the th of the table will not allow you to order the table.

DEFAULT: true

data-fc-search

If you set this to false then the search will not be called.

DEFAULT: true