StackUI

Data Table

ตารางข้อมูล responsive สำหรับงบการเงิน ข้อมูลผู้ถือหุ้น

Default (Striped)

Previewdata-table-default
<section class="stk-section">  <div class="container">    <h2 class="stk-heading text-center mb-5">ข้อมูลทางการเงิน</h2>    <div class="stk-table-wrapper">      <table class="stk-table stk-table--striped">        <thead>          <tr>            <th>รายการ</th>            <th class="text-end">2568</th>            <th class="text-end">2567</th>          </tr>        </thead>        <tbody>          <tr>            <td>รายได้รวม (ล้านบาท)</td>            <td class="text-end">1,500</td>            <td class="text-end">1,200</td>          </tr>        </tbody>      </table>      <p class="stk-table__caption">หมายเหตุ: ตัวเลขผ่านการตรวจสอบแล้ว</p>    </div>  </div></section>

Props

FieldTypeRequiredDescription
titlestringหัวข้อ section
headersstring[]หัวตาราง
rowsstring[][]ข้อมูลแต่ละแถว
captionstring-หมายเหตุใต้ตาราง

CSS Classes

.stk-table-wrapper               /* responsive scroll wrapper */.stk-table                       /* table base */.stk-table--striped              /* alternating row colors */.stk-table--bordered             /* all borders */.stk-table__caption              /* footnote below table */

On this page