คอมโพเนนต์ทั้งหมด

Table

ตารางข้อมูลที่เลื่อนแนวนอนได้บนจอเล็ก

ui/display.tsxServer safe

ใช้งาน

ใช้ table จริงใน TableWrap ที่เลื่อนแนวนอนบนจอเล็กและโฟกัสได้ด้วยคีย์บอร์ด ตัวเลขชิดขวาและกว้างเท่ากัน

คำสั่งซื้อ	คอร์ส	สถานะ	ยอด
LU-2410-0193	AI สำหรับนักเรียน	ชำระแล้ว	฿1,290
LU-2410-0188	Lingua Rush	รอชำระ	฿490
LU-2410-0172	ปรึกษา 45 นาที	นัดแล้ว	฿900
LU-2410-0159	Mock TGAT ชุด 2	คืนเงิน	฿0

tsx

<TableWrap label="คำสั่งซื้อล่าสุด">
  <table className="ds-table">
    <thead><tr><th scope="col">คำสั่งซื้อ</th><th scope="col">คอร์ส</th><th scope="col">สถานะ</th><th scope="col" data-numeric>ยอด</th></tr></thead>
    <tbody>…</tbody>
  </table>
</TableWrap>

Props

Prop	Type	Default	คำอธิบาย
`TableWrap.label`	`string`	`-`	ชื่อพื้นที่ที่เลื่อนได้
`table.ds-table[data-density]`	`"compact"`	`-`	ลดระยะในแถว
`th/td[data-numeric]`	`attribute`	`-`	ชิดขวา ตัวเลขกว้างเท่ากัน

ใส่ scope=col ที่หัวคอลัมน์
พื้นที่เลื่อนมี tabIndex=0 จึงเลื่อนด้วยคีย์บอร์ดได้

ใช้งาน

Props

การเข้าถึง