table
Semantic data table
Use a native table inside a figure. AngularCSS styles its semantic table
structure directly.
<figure>
<table>
<thead>
<tr>
<th scope="col">Invoice</th>
</tr>
</thead>
</table>
</figure>
Example
View source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AngularCSS Table</title>
<link rel="stylesheet" href="../../css/preflight.css" />
<link rel="stylesheet" href="../../css/angular.css" />
<link rel="stylesheet" href="../example.css" />
<script src="../../js/angular-ts.umd.js"></script>
<script src="../../js/angular-css.umd.js"></script>
</head>
<body ng-app="angular.css" ng-cloak>
<figure>
<table>
<caption>
A list of recent invoices.
</caption>
<thead>
<tr>
<th scope="col">Invoice</th>
<th scope="col">Status</th>
<th scope="col">Method</th>
<th class="text-right" scope="col">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">INV001</th>
<td>Paid</td>
<td>Card</td>
<td class="text-right">$250.00</td>
</tr>
<tr>
<th scope="row">INV002</th>
<td>Pending</td>
<td>PayPal</td>
<td class="text-right">$150.00</td>
</tr>
<tr>
<th scope="row">INV003</th>
<td>Unpaid</td>
<td>Transfer</td>
<td class="text-right">$350.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Total</td>
<td class="text-right">$750.00</td>
</tr>
</tfoot>
</table>
</figure>
</body>
</html>
Workflows
View source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AngularCSS Table Workflows</title>
<link rel="stylesheet" href="../../css/preflight.css" />
<link rel="stylesheet" href="../../css/angular.css" />
<link rel="stylesheet" href="../example.css" />
<script src="../../js/angular-ts.umd.js"></script>
<script src="../../js/angular-css.umd.js"></script>
</head>
<body
ng-app="angular.css"
ng-cloak
ng-init="invoices=[{id:'INV001',status:'Paid',method:'Credit Card',amount:'$250.00'},{id:'INV002',status:'Pending',method:'PayPal',amount:'$150.00'},{id:'INV003',status:'Unpaid',method:'Bank Transfer',amount:'$350.00'},{id:'INV004',status:'Paid',method:'Credit Card',amount:'$450.00'},{id:'INV005',status:'Paid',method:'PayPal',amount:'$550.00'},{id:'INV006',status:'Pending',method:'Bank Transfer',amount:'$200.00'},{id:'INV007',status:'Unpaid',method:'Credit Card',amount:'$300.00'}];products=[{name:'Wireless Mouse',price:'$29.99'},{name:'Mechanical Keyboard',price:'$129.99'},{name:'USB-C Hub',price:'$49.99'}];payments=[{id:'m5gr84i9',amount:'$316.00',status:'success',statusAr:'ناجح',email:'ken99@example.com',selected:false},{id:'3u1reuv4',amount:'$242.00',status:'success',statusAr:'ناجح',email:'Abe45@example.com',selected:false},{id:'derv1ws0',amount:'$837.00',status:'processing',statusAr:'قيد المعالجة',email:'Monserrat44@example.com',selected:false},{id:'5kma53ae',amount:'$874.00',status:'success',statusAr:'ناجح',email:'Silas22@example.com',selected:false},{id:'bhqecj4p',amount:'$721.00',status:'failed',statusAr:'فشل',email:'carmella@example.com',selected:false}];dataState={query:'',order:'email',all:false,selected:0,showStatus:true,showEmail:true,showAmount:true};rtlDataState={query:'',order:'email',all:false,showStatus:true,showEmail:true,showAmount:true};tableState={action:'Ready'}"
>
<main class="table-workflow-grid" aria-label="Table workflows">
<section
class="table-workflow table-workflow-wide"
data-example="table-demo table-footer"
aria-label="Recent invoices"
>
<figure>
<table>
<caption>
A list of your recent invoices.
</caption>
<thead>
<tr>
<th scope="col">Invoice</th>
<th scope="col">Status</th>
<th scope="col">Method</th>
<th scope="col" class="text-right">Amount</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="invoice in invoices" animate>
<th scope="row">{{ invoice.id }}</th>
<td>{{ invoice.status }}</td>
<td>{{ invoice.method }}</td>
<td class="text-right">{{ invoice.amount }}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Total</td>
<td class="text-right">$2,500.00</td>
</tr>
</tfoot>
</table>
</figure>
</section>
<section
class="table-workflow table-actions-example"
data-example="table-actions"
aria-label="Product actions"
>
<figure>
<table>
<thead>
<tr>
<th scope="col">Product</th>
<th scope="col">Price</th>
<th scope="col" class="text-right">Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="product in products" animate>
<th scope="row">{{ product.name }}</th>
<td>{{ product.price }}</td>
<td class="text-right">
<div ng-dropdown-menu class="table-action-menu">
<button
variant="ghost"
size="icon-xs"
type="button"
aria-label="Open menu for {{ product.name }}"
>
<svg viewBox="0 0 24 24" aria-hidden="true">
<circle cx="5" cy="12" r="1"></circle>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
</svg>
</button>
<menu>
<button ng-click="tableState.action='Edit '+product.name">
Edit
</button>
<button
ng-click="tableState.action='Duplicate '+product.name"
>
Duplicate
</button>
<hr />
<button
variant="destructive"
ng-click="tableState.action='Delete '+product.name"
>
Delete
</button>
</menu>
</div>
</td>
</tr>
</tbody>
</table>
</figure>
</section>
<section
class="table-workflow"
data-example="table-rtl"
aria-label="جدول الفواتير"
dir="rtl"
lang="ar"
>
<figure>
<table>
<caption>
قائمة بفواتيرك الأخيرة.
</caption>
<thead>
<tr>
<th scope="col">الفاتورة</th>
<th scope="col">الحالة</th>
<th scope="col">الطريقة</th>
<th scope="col" class="text-start">المبلغ</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">INV001</th>
<td>مدفوع</td>
<td>بطاقة ائتمانية</td>
<td>$250.00</td>
</tr>
<tr>
<th scope="row">INV002</th>
<td>قيد الانتظار</td>
<td>PayPal</td>
<td>$150.00</td>
</tr>
<tr>
<th scope="row">INV003</th>
<td>غير مدفوع</td>
<td>تحويل بنكي</td>
<td>$350.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">المجموع</td>
<td>$2,500.00</td>
</tr>
</tfoot>
</table>
</figure>
</section>
<section
class="table-workflow table-workflow-wide"
data-example="data-table-demo"
aria-label="Payments data table"
>
<div class="data-table-toolbar">
<input
ng-model="dataState.query"
placeholder="Filter emails..."
aria-label="Filter payment emails"
/>
<div ng-dropdown-menu>
<button variant="outline" type="button">
Columns <span aria-hidden="true">⌄</span>
</button>
<menu>
<button
aria-checked="{{ dataState.showStatus }}"
ng-click="dataState.showStatus=!dataState.showStatus"
>
Status
</button>
<button
aria-checked="{{ dataState.showEmail }}"
ng-click="dataState.showEmail=!dataState.showEmail"
>
Email
</button>
<button
aria-checked="{{ dataState.showAmount }}"
ng-click="dataState.showAmount=!dataState.showAmount"
>
Amount
</button>
</menu>
</div>
</div>
<figure class="data-table-frame">
<table>
<thead>
<tr>
<th scope="col" class="data-table-select">
<input
type="checkbox"
ng-model="dataState.all"
ng-change="payments[0].selected=dataState.all;payments[1].selected=dataState.all;payments[2].selected=dataState.all;payments[3].selected=dataState.all;payments[4].selected=dataState.all"
aria-label="Select all payments"
/>
</th>
<th scope="col" ng-if="dataState.showStatus">Status</th>
<th scope="col" ng-if="dataState.showEmail">
<button
variant="ghost"
type="button"
ng-click="dataState.order=dataState.order==='email' ? '-email' : 'email'"
>
Email <span aria-hidden="true">↕</span>
</button>
</th>
<th scope="col" ng-if="dataState.showAmount" class="text-right">
Amount
</th>
<th scope="col">
<span class="visually-hidden">Actions</span>
</th>
</tr>
</thead>
<tbody>
<tr
ng-repeat="payment in payments | filter:dataState.query | orderBy:dataState.order"
animate
aria-selected="{{ payment.selected }}"
>
<td class="data-table-select">
<input
type="checkbox"
ng-model="payment.selected"
ng-change="dataState.selected=payment.selected ? 1 : 0"
aria-label="Select {{ payment.email }}"
/>
</td>
<td ng-if="dataState.showStatus" class="capitalize">
{{ payment.status }}
</td>
<td ng-if="dataState.showEmail" class="lowercase">
{{ payment.email }}
</td>
<td
ng-if="dataState.showAmount"
class="text-right table-cell-medium"
>
{{ payment.amount }}
</td>
<td class="text-right">
<button
variant="ghost"
size="icon-xs"
type="button"
ng-click="tableState.action='Open '+payment.id"
aria-label="Open menu for {{ payment.email }}"
>
•••
</button>
</td>
</tr>
<tr ng-if="!(payments | filter:dataState.query).length" animate>
<td colspan="5" class="data-table-empty">No results.</td>
</tr>
</tbody>
</table>
</figure>
<div class="data-table-footer">
<p>{{ dataState.selected }} of 5 row(s) selected.</p>
<div class="row">
<button variant="outline" size="sm" type="button" disabled>
Previous</button
><button variant="outline" size="sm" type="button" disabled>
Next
</button>
</div>
</div>
</section>
<section
class="table-workflow table-workflow-wide"
data-example="data-table-rtl"
aria-label="جدول بيانات المدفوعات"
dir="rtl"
lang="ar"
ng-init="rtlPayments=[{amount:'$316.00',statusAr:'ناجح',email:'ken99@example.com',selected:false},{amount:'$242.00',statusAr:'ناجح',email:'Abe45@example.com',selected:false},{amount:'$837.00',statusAr:'قيد المعالجة',email:'Monserrat44@example.com',selected:false},{amount:'$874.00',statusAr:'ناجح',email:'Silas22@example.com',selected:false},{amount:'$721.00',statusAr:'فشل',email:'carmella@example.com',selected:false}]"
>
<div class="data-table-toolbar">
<input
ng-model="rtlDataState.query"
placeholder="تصفية البريد الإلكتروني..."
aria-label="تصفية البريد الإلكتروني"
/>
<div ng-dropdown-menu>
<button variant="outline" type="button">
الأعمدة <span aria-hidden="true">⌄</span>
</button>
<menu>
<button
aria-checked="{{ rtlDataState.showStatus }}"
ng-click="rtlDataState.showStatus=!rtlDataState.showStatus"
>
الحالة
</button>
<button
aria-checked="{{ rtlDataState.showEmail }}"
ng-click="rtlDataState.showEmail=!rtlDataState.showEmail"
>
البريد الإلكتروني
</button>
<button
aria-checked="{{ rtlDataState.showAmount }}"
ng-click="rtlDataState.showAmount=!rtlDataState.showAmount"
>
المبلغ
</button>
</menu>
</div>
</div>
<figure class="data-table-frame">
<table>
<thead>
<tr>
<th scope="col" class="data-table-select">
<input
type="checkbox"
ng-model="rtlDataState.all"
aria-label="تحديد الكل"
/>
</th>
<th scope="col" ng-if="rtlDataState.showStatus">الحالة</th>
<th scope="col" ng-if="rtlDataState.showEmail">
<button
variant="ghost"
type="button"
ng-click="rtlDataState.order=rtlDataState.order==='email' ? '-email' : 'email'"
>
البريد الإلكتروني <span aria-hidden="true">↕</span>
</button>
</th>
<th scope="col" ng-if="rtlDataState.showAmount">المبلغ</th>
<th scope="col">
<span class="visually-hidden">الإجراءات</span>
</th>
</tr>
</thead>
<tbody>
<tr
ng-repeat="payment in rtlPayments | filter:rtlDataState.query | orderBy:rtlDataState.order"
animate
>
<td class="data-table-select">
<input
type="checkbox"
ng-model="payment.selected"
aria-label="تحديد {{ payment.email }}"
/>
</td>
<td ng-if="rtlDataState.showStatus">{{ payment.statusAr }}</td>
<td ng-if="rtlDataState.showEmail" class="lowercase">
{{ payment.email }}
</td>
<td ng-if="rtlDataState.showAmount" class="table-cell-medium">
{{ payment.amount }}
</td>
<td>
<button
variant="ghost"
size="icon-xs"
type="button"
aria-label="فتح القائمة"
>
•••
</button>
</td>
</tr>
<tr
ng-if="!(rtlPayments | filter:rtlDataState.query).length"
animate
>
<td colspan="5" class="data-table-empty">لا توجد نتائج.</td>
</tr>
</tbody>
</table>
</figure>
<div class="data-table-footer">
<p>0 من 5 صف(وف) محدد.</p>
<div class="row">
<button variant="outline" size="sm" type="button" disabled>
السابق</button
><button variant="outline" size="sm" type="button" disabled>
التالي
</button>
</div>
</div>
</section>
<output class="table-workflow-output">{{ tableState.action }}</output>
</main>
</body>
</html>
Installation
Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or angular.css module dependency. Add AngularTS when using application bindings such as ng-model or ng-click. See Installation for the complete setup.
This entry uses native HTML and CSS. AngularCSS registers no runtime directive for it. Native tabular structure and header scopes.
Anatomy
Root styling selector
table
Semantic structure
Use semantic HTML with the root styling selector above. Native elements provide the structure; the stylesheet supplies presentation.
API
Attributes and state
| Attribute | Access | Purpose |
|---|---|---|
aria-selected | Authored | Selected item state. |
Attributes remain authored HTML, native state, or AngularTS inputs. AngularCSS does not write element state.
CSS custom properties
This styling hook does not define component-specific CSS custom properties.
DOM events
This component does not emit a component-specific custom event.
Native DOM events continue to work normally. AngularTS event directives such as
ng-click and ng-keydown, plus the data-change model callback, remain application-owned.
Behavior
Native tabular structure and header scopes. AngularCSS supplies styling without a runtime directive. Native HTML owns platform behavior; AngularTS owns application values, commands, and authored state.
AngularCSS does not replace AngularTS interpolation, bindings, structural directives, form controllers, validation, or application state.
Accessibility
Keep meaningful labels and table or figure structure in authored HTML. Do not rely on color, position, or generated visual marks as the only representation of data.
Authored accessible names and relationships are preserved. Test the final composition with keyboard navigation and assistive technology because labels and content come from the application.
Customization
Target semantic elements, native state selectors, and component classes with ordinary CSS. Behavior and accessible state remain with native HTML and AngularTS; visual choices belong in the application stylesheet.
Read Customization for layer order, design tokens, state variants, and iframe demo isolation.
Feedback
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.