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
<%- include('modules/ui/DataTable', {
title: 'Users',
subtitle: total + ' total',
columns: [
{ key: 'name', header: 'Name' },
{ key: 'role', header: 'Role' },
{ key: 'status', header: 'Status' },
{ key: 'joined', header: 'Joined', align: 'right' },
],
rows: users,
page: page, // current page (1-based), from req.query
total: total, // total record count, from DB
pageSize: 20,
qs: qs, // query string without 'page', from route
}) %>
<%-- In your Express route: --%>
<%
// const page = parseInt(req.query.page) || 1;
// const { users, total } = await UserService.list({ page, pageSize: 20 });
// const qs = new URLSearchParams(req.query); qs.delete('page');
// res.render('users/index', { users, total, page, qs: qs.toString() });
%>
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
<%- include('modules/ui/DataTable', {
columns: [...],
rows: users,
page: page,
total: total,
pageSize: 20,
qs: qs,
getRowHref: function(row) { return '/users/' + row.userId; }
}) %>
| 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
<%- include('modules/ui/DataTable', {
columns: [
{ key: 'name', header: 'User',
render: function(row) {
return ''
+ ''
+ row.name.charAt(0).toUpperCase()
+ ''
+ '' + row.name + ''
+ '';
}
},
{ key: 'status', header: 'Status',
render: function(row) {
var v = row.status === 'Active' ? 'bg-success-subtle text-success-fg'
: row.status === 'Pending' ? 'bg-warning-subtle text-warning-fg'
: 'bg-surface-overlay text-text-secondary';
return ''
+ row.status + '';
}
},
],
rows: users,
page: page,
total: total,
pageSize: 20,
qs: qs,
}) %>
Users
| Name | Role | Status | Joined |
|---|---|---|---|
| No users found. | |||
Showing 0–0 of 0
<%- include('modules/ui/DataTable', {
columns: [...],
rows: [],
page: 1,
total: 0,
pageSize: 20,
qs: qs,
emptyMessage: 'No users found.'
}) %>
<%
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
<% } %>