Table

Source

• Table.css

Example

<div class="x-table border border-body-tertiary text-sm">
    <table>
        <thead class="whitespace-nowrap text-main-secondary font-bold">
            <tr>
                <th>Full name</th>
                <th>Email</th>
                <th>Employment</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Agata Henderson</td>
                <td>a.henderson@example.com</td>
                <td>Interpreter</td>
            </tr>
            <tr>
                <td>Tony Johnston</td>
                <td>t.johnston@example.com</td>
                <td>Singer</td>
            </tr>
            <tr>
                <td>Maya Walker</td>
                <td>m.walker@example.com</td>
                <td>Lawer</td>
            </tr>
        </tbody>
    </table>
</div>

More examples can be found in the Winduum docs.

Example CSS

@import "winduum/src/components/table/props/default.css" layer(theme);
@import "winduum/src/components/table/default.css" layer(utilities);
@import "winduum/src/components/table/interactive.css" layer(utilities);

/* Example customization */
@layer theme {
  :root, :host {
    --x-table-border-radius: var(--radius-md);
    --x-table-padding-inline: 0.75rem;
  }
}

Winduum CSS Code

winduum/src/components/table/props/default.css

:root, :host {
  --x-table-border-radius: var(--radius-xl);
  --x-table-padding-inline: 1rem;
  --x-table-cell-spacing-x: 0.625rem;
  --x-table-cell-spacing-y: 0.875rem;
  --x-table-cell-block-size: auto;
  --x-table-cell-border-block-width: 1px;
}

winduum/src/components/table/default.css

.x-table {
  border-radius: var(--x-table-border-radius);
  background-color: var(--x-table-background-color, var(--color-body-primary));
  max-inline-size: 100%;
  overflow: auto;

  :where(table) {
    inline-size: 100%;
    vertical-align: middle;
    background-color: inherit;
  }

  :where(thead tr:not(:first-child), tbody tr, tfoot tr) {
    border-block-start: var(--x-table-cell-border-block-width) solid var(--x-table-border-color, var(--color-body-tertiary));
  }

  :where(td, th) {
    padding: var(--x-table-cell-spacing-y) var(--x-table-cell-spacing-x);
    block-size: var(--x-table-cell-block-size);
    border-color: var(--x-table-border-color, var(--color-body-tertiary));
    border-inline-width: var(--x-table-cell-border-inline-width, 0);

    &:first-child {
      padding-inline-start: var(--x-table-padding-inline);
      border-inline-start: 0;
    }

    &:last-child {
      padding-inline-end: var(--x-table-padding-inline);
      border-inline-end: 0;
    }
  }
}

winduum/src/components/table/interactive.css

.x-table {
  :where(tbody:first-child, tfoot:first-child) {
    :where(tr:first-child) {
      &, :where(th,td):where(:first-child) {
        border-start-start-radius: var(--x-table-border-radius);
      }

      &, :where(th,td):where(:last-child) {
        border-start-end-radius: var(--x-table-border-radius);
      }
    }
  }

  :where(tbody:last-child, tfoot:last-child) {
    :where(tr:last-child) {
      &, :where(th,td):where(:first-child) {
        border-end-start-radius: var(--x-table-border-radius);
      }

      &, :where(th,td):where(:last-child) {
        border-end-end-radius: var(--x-table-border-radius);
      }
    }
  }

  :where(tr, th, td):where([tabindex="0"]), :where(.outline) {
    transition: var(--transition-all);
    outline: var(--x-table-outline-width, 1px) solid transparent;
    outline-offset: calc(var(--x-table-outline-width, 1px) * -1);

    &:is(:hover, :focus-visible, .active) {
      background-color:
        color-mix(
          in var(--x-table-outline-background-color-space, srgb),
          var(--x-table-outline-accent-color, var(--color-accent)) var(--x-table-outline-background-color-opacity, 5%),
          var(--x-table-outline-background-color-mix, transparent)
        );
      outline-color: var(--x-table-outline-accent-color, var(--color-accent));
    }
  }
}