Table

Data table component

Basic Usage

When you use HTML table tags, Podo UI's default styles are automatically applied.

HTML

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>[email protected]</td>
      <td>Admin</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>[email protected]</td>
      <td>User</td>
    </tr>
  </tbody>
</table>

Live Example:

Name	Email	Role
John Doe	[email protected]	Admin
Jane Smith	[email protected]	User
Mike Johnson	[email protected]	User

List Style

Adding the .list class applies a hover effect to rows, making them look like a clickable list.

Live Example (hover over the rows):

Title	Author	Date
Announcement Title	Admin	2024-01-15
Post Title	User1	2024-01-14
Another Post	User2	2024-01-13

Border Style

Adding the .border class displays a bottom border on each cell.

Live Example:

Product	Price	Stock
Product A	$100	50
Product B	$200	30
Product C	$150	100

Fill Style

Adding the .fill class applies background color to rows.

Live Example:

Name	Department	Position
John Doe	Development	Team Lead
Jane Smith	Design	Associate
Mike Johnson	Marketing	Manager

Combined Styles

You can combine multiple classes. .list.fill applies both background color and hover effect.

Live Example (.list.fill):

Rank	Name	Score
1	Kim XX	95
2	Lee XX	92
3	Park XX	88

Using in SCSS

component.module.scss

@use 'podo-ui/mixin' as *;

table {
  width: 100%;
  border-collapse: separate;
  border-radius: r(2);
  border: 1px solid color(border);

  // List style (hover effect)
  &.list > tbody > tr {
    &:hover {
      cursor: pointer;
      background-color: color(default-fill);
    }
  }

  // Border style
  &.border > thead,
  &.border > tbody {
    > tr > th,
    > tr > td {
      border-bottom: 1px solid color(border);
    }
  }

  // Fill style
  &.fill > thead,
  &.fill > tbody {
    > tr {
      background-color: color(default-fill);
    }
  }

  // Cell padding
  > thead,
  > tbody {
    > tr {
      > th,
      > td {
        padding: s(3) s(4);
        text-align: left;
      }
    }
  }
}