KAUI CSS KitComponent Showcase

Table Component (.k-table)

Semantic data tables with responsive overflow, striped rows, hover feedback, borders, compact spacing, actions, and empty states.

Search, sort and frozen columns

ProjectOwnerStatusPriority
KAUI DashboardĐặng LongActiveHigh
Design TokensMinh TrầnReviewMedium
Bảng điều khiểnAnh NguyễnDraftLow

Rich cells and column totals

AvatarTrendRevenue
Ada$1,200
MT$850

Frozen specified columns (Left & Right)

Table with isolated viewport scroll: Column ID & Member are completely fixed on the left, Actions is completely fixed on the right, and the scrollbar belongs strictly to the middle container.

ID Member
#001
AdaAda Lovelace
#002
MTMinh Tran
#003
SarahSarah Connor
#004
ALAlex Morgan
Department Role Location Experience Joining Date Reporting To Status Salary
Engineering Principal Architect London, UK 12+ years 2021-03-15 CEO Office Full-time $145,000
Product Design Lead Designer Hanoi, VN 8 years 2022-06-01 Head of Product Full-time $115,000
Security Operations Director Los Angeles, US 15 years 2020-01-10 CISO Contract $130,000
Infrastructure DevOps Specialist Singapore 6 years 2023-09-20 Platform Lead Full-time $120,000
Actions
Recent project activity
ProjectOwnerStatusUpdated
KAUI DashboardDang LongActive2 minutes ago
Design TokensMinh TranReview18 minutes ago
Marketing SiteAnh NguyenDraft1 hour ago

Striped, hover, bordered and compact variants

MemberRoleLast activeActions
Alex MorganAdministratorToday, 09:42
Taylor KimEditorYesterday

Empty state

NotificationReceived
No notifications to display.

Usage guide & code sample

Wrap the table in .k-table-wrap for responsive overflow; use .k-table--striped or .k-table--hover to add readability.

<div class="k-table-wrap">
  <table class="k-table k-table--striped k-table--hover">
    <thead><tr><th>Name</th><th>Status</th></tr></thead>
    <tbody><tr><td>Core API</td><td>Healthy</td></tr></tbody>
  </table>
</div>