Table

Organism

Semantik HTML tablosu. thead/tbody, sütun hizalaması ve boş durum mesajı desteği.

Default

Preview

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

Code

<%- include('modules/ui/Table', {
  columns: [
    { key: 'name',   header: 'Name' },
    { key: 'role',   header: 'Role' },
    { key: 'status', header: 'Status' },
    { key: 'joined', header: 'Joined', align: 'right' },
  ],
  rows: users
}) %>

Compact — 2 columns

Preview

Setting	Value
Max upload size	10 MB
Session timeout	30 min
API rate limit	1 000 / hr
Cache TTL	5 min

Code

<%- include('modules/ui/Table', {
  columns: [
    { key: 'key',   header: 'Setting' },
    { key: 'value', header: 'Value', align: 'right' },
  ],
  rows: settings
}) %>

Empty state

Preview

Name	Role	Status	Joined
No users found. Invite someone to get started.

Code

<%- include('modules/ui/Table', {
  columns: [...],
  rows: [],
  emptyMessage: 'No users found. Invite someone to get started.'
}) %>

Source modules/ui/Table.ejs

<%
  var _columns      = locals.columns      || [];
  var _rows         = locals.rows         || [];
  var _caption      = locals.caption      || '';
  var _emptyMessage = locals.emptyMessage || 'No results found.';
  var _className    = locals.className    || '';

  var alignClass = { left: 'text-left', center: 'text-center', right: 'text-right' };
%>

  
    <% if (_caption) { %><% } %>
    
        <% _columns.forEach(function (col) { %>
        
        <% }); %>
      
      <% if (_rows.length === 0) { %>
      
      <% } else { %>
        <% _rows.forEach(function (row) { %>
        
          <% _columns.forEach(function (col) { %>
          
          <% }); %>
        
        <% }); %>
      <% } %>
    <%= _caption %>
      
          <%= col.header %>
        
    
    
        <%= _emptyMessage %>
      

            <%= row[col.key] !== undefined ? row[col.key] : '' %>