DataTable
OrganismServer-side paginated data table. Card wrapper, başlık slotu, toolbar slotu, tıklanabilir satır ve her zaman görünür pagination desteği.
Users
87 total
| Name | Role | Status | Joined |
|---|---|---|---|
| Alice Johnson | Admin | Active | Jan 2024 |
| Bob Smith | Editor | Active | Mar 2024 |
| Carol White | Viewer | Inactive | Jun 2024 |
| Dan Brown | Editor | Pending | Sep 2024 |
Showing 1–20 of 87
Users
| Name | Role | Status | Joined |
|---|---|---|---|
| Alice Johnson | Admin | Active | Jan 2024 |
| Bob Smith | Editor | Active | Mar 2024 |
| Carol White | Viewer | Inactive | Jun 2024 |
| Dan Brown | Editor | Pending | Sep 2024 |
Showing 1–4 of 4
| Name | Role | Status | Joined |
|---|---|---|---|
| Alice Johnson | Admin | Active | Jan 2024 |
| Bob Smith | Editor | Active | Mar 2024 |
| Carol White | Viewer | Inactive | Jun 2024 |
| Dan Brown | Editor | Pending | Sep 2024 |
Showing 1–4 of 4
Users
| Name | Role | Status | Joined |
|---|---|---|---|
| No users found. | |||
Showing 0–0 of 0
<%
var _columns = locals.columns || [];
var _rows = locals.rows || [];
var _page = locals.page || 1;
var _total = locals.total || 0;
var _pageSize = locals.pageSize || 20;
var _totalPages = Math.max(1, Math.ceil(_total / _pageSize));
var _qs = locals.qs || '';
var _emptyMessage = locals.emptyMessage || 'No results found.';
var _title = locals.title || '';
var _subtitle = locals.subtitle || '';
var _headerRight = locals.headerRight || '';
var _toolbar = locals.toolbar || '';
var _getRowHref = locals.getRowHref || null;
var _caption = locals.caption || '';
var _pageUrl = function(p) {
return '?' + (_qs ? _qs + '&' : '') + 'page=' + p;
};
var _rangeStart = _total === 0 ? 0 : (_page - 1) * _pageSize + 1;
var _rangeEnd = Math.min(_page * _pageSize, _total);
var _alignClass = { left: 'text-left', center: 'text-center', right: 'text-right' };
var _allPages = [];
for (var _pi = 1; _pi <= _totalPages; _pi++) _allPages.push(_pi);
var _visible = _allPages.filter(function(p) {
return p === 1 || p === _totalPages || Math.abs(p - _page) <= 1;
});
var _withEllipsis = [];
var _prevP = null;
for (var _pj = 0; _pj < _visible.length; _pj++) {
var _vp = _visible[_pj];
if (_prevP !== null && _vp - _prevP > 1) _withEllipsis.push('ellipsis');
_withEllipsis.push(_vp);
_prevP = _vp;
}
var _navLink = 'flex items-center justify-center rounded-md text-sm font-medium border border-border text-text-secondary hover:bg-surface-overlay hover:text-text-primary transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus';
var _navDead = 'flex items-center justify-center rounded-md text-sm font-medium border border-border text-text-disabled cursor-not-allowed opacity-50';
var _navSm = 'h-9 px-3';
var _navSq = 'h-9 w-9';
%>
<% if (_title || _headerRight) { %>
<% if (_title) { %><%= _title %>
<% } %>
<% if (_subtitle) { %><%= _subtitle %>
<% } %>
<% if (_headerRight) { %><%- _headerRight %><% } %>
<% } %>
<% if (_toolbar) { %>
<%- _toolbar %>
<% } %>
<% if (_caption) { %><%= _caption %> <% } %>
<% _columns.forEach(function(col) { %>
<%= col.header %>
<% }); %>
<% if (_rows.length === 0) { %>
<%= _emptyMessage %>
<% } else { %>
<% _rows.forEach(function(row) { %>
<% var _href = _getRowHref ? _getRowHref(row) : null; %>
>
<% _columns.forEach(function(col) { %>
<% if (col.render) { %>
<%- col.render(row) %>
<% } else { %>
<%= row[col.key] !== undefined ? row[col.key] : '—' %>
<% } %>
<% }); %>
<% }); %>
<% } %>
<% if (_total > 0) { %>
Showing <%= _rangeStart %>–<%= _rangeEnd %>
of <%= _total %>
<% } else { %>
No results
<% } %>