Table

Material Design 3 table component for displaying structured data with multiple variants and features

Table

Tables display information in a grid-like format of rows and columns. @duskmoon-dev/core provides a complete set of Material Design 3 table variants with support for different layouts, interactions, and data presentations.

Basic Usage

Basic Table

Name Email Role
John Doe john@example.com Developer
Jane Smith jane@example.com Designer
Bob Johnson bob@example.com Manager

Variants

Striped Table

Alternate row colors for improved readability:

Striped Table

Product Category Price
Widget A Hardware $29.99
Widget B Software $49.99
Widget C Hardware $19.99
Widget D Software $99.99

Bordered Table

Add borders to all cells:

Bordered Table

ID Name Status
001 Project Alpha Active
002 Project Beta Completed
003 Project Gamma Pending

Borderless Table

Remove all borders for a clean look:

Borderless Table

Date Event Location
2025-01-15 Team Meeting Conference Room A
2025-01-20 Product Launch Main Hall

Hoverable Rows

Add hover effects to table rows:

Hoverable Table

Customer Order ID Total
Alice Brown #12345 $150.00
Charlie Davis #12346 $275.50
Eve Wilson #12347 $89.99

Combined Variants

Combine striped and hover effects:

Striped and Hoverable Table

Task Assignee Due Date
Update documentation John 2025-01-15
Fix bug #123 Jane 2025-01-16
Review PR #45 Bob 2025-01-17

Density Options

Compact Table

Reduce padding for space-efficient layouts:

Compact Table

Code Description Qty
ABC-001 Component A 50
ABC-002 Component B 75

Comfortable Table

Increase padding for better readability:

Comfortable Table

Title Author Year
The Great Gatsby F. Scott Fitzgerald 1925
To Kill a Mockingbird Harper Lee 1960

Interactive Features

Selectable Rows

Make rows selectable with visual feedback:

Selectable Rows

File Name Size Modified
document.pdf 2.4 MB 2025-01-10
spreadsheet.xlsx 1.8 MB 2025-01-11
presentation.pptx 5.2 MB 2025-01-12

With Checkboxes

Add checkboxes for multi-selection:

Table with Checkboxes

Name Department Status
Emma Thompson Engineering Active
Michael Chen Design Active

Sortable Columns

Add sort indicators to columns:

Sortable Columns

Name ↑ Email ↕ Role ↕
Alice Johnson alice@example.com Engineer
Bob Smith bob@example.com Designer

Column Alignment

Numeric Columns

Right-align numeric data with tabular figures:

Numeric Columns

Product Price Stock Sales
Widget Pro $1,234.56 1,250 3,456
Widget Lite $89.99 850 2,789

Center Aligned

Center-align content:

Center Aligned Columns

Name Status Badge
Project Alpha ✓ Gold
Project Beta ⋯ Silver

Actions Column

Right-align action buttons:

Actions Column

Name Email Actions
John Doe john@example.com
Jane Smith jane@example.com

Advanced Features

Keep header visible while scrolling:

Sticky Header

ID Name Description
001 Item 1 Description for item 1
002 Item 2 Description for item 2

With Caption

Add a caption to describe the table:

Table with Caption

User Activity Report - January 2025
User Login Count Last Active
Alice 45 2025-01-10
Bob 32 2025-01-11

Add footer totals or summaries:

Table with Footer

Item Quantity Price Total
Product A 10 $25.00 $250.00
Product B 5 $50.00 $250.00
Total $500.00

Responsive Table

Wrap table in a responsive container for horizontal scrolling:

Responsive Table

Name Email Phone Department Location Role Start Date Status
John Doe john@example.com +1-234-567-8900 Engineering New York Senior Developer 2023-01-15 Active

Surface Variant

Use alternative surface color:

Surface Variant

Metric Value Change
Revenue $150,000 +12%
Users 5,432 +8%

Best Practices

Data Organization

Structure data logically with appropriate headers:

Well-Organized Data

Quarter Revenue Expenses Profit Margin
Q1 2024 $450,000 $280,000 $170,000 37.8%
Q2 2024 $520,000 $310,000 $210,000 40.4%

Accessibility

  • Use <thead>, <tbody>, and <tfoot> for semantic structure
  • Always include proper column headers with <th>
  • Add scope attributes to headers
  • Use aria-label for icon-only buttons in action columns
  • Provide table captions for screen readers

Accessible Table

Employee Directory
Name Email Department
John Doe john@example.com Engineering

Mobile Responsiveness

For complex tables, use responsive wrapper:

Mobile Responsive

Framework Examples

React

interface TableProps {
  data: Array<Record<string, any>>;
  columns: Array<{ key: string; header: string; align?: 'left' | 'center' | 'right' }>;
  striped?: boolean;
  hover?: boolean;
  bordered?: boolean;
}

export function Table({ data, columns, striped, hover, bordered }: TableProps) {
  const className = [
    'table',
    striped && 'table-striped',
    hover && 'table-hover',
    bordered && 'table-bordered',
  ].filter(Boolean).join(' ');

  return (
    <table className={className}>
      <thead>
        <tr>
          {columns.map((col) => (
            <th
              key={col.key}
              className={col.align === 'right' ? 'table-numeric' : col.align === 'center' ? 'table-center' : ''}
            >
              {col.header}
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        {data.map((row, idx) => (
          <tr key={idx}>
            {columns.map((col) => (
              <td
                key={col.key}
                className={col.align === 'right' ? 'table-numeric' : col.align === 'center' ? 'table-center' : ''}
              >
                {row[col.key]}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

// Usage
<Table
  data={users}
  columns={[
    { key: 'name', header: 'Name' },
    { key: 'email', header: 'Email' },
    { key: 'count', header: 'Count', align: 'right' },
  ]}
  striped
  hover
/>

Vue

<template>
  <table :class="tableClasses">
    <thead>
      <tr>
        <th
          v-for="col in columns"
          :key="col.key"
          :class="getAlignClass(col.align)"
        >
          {{ col.header }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, idx) in data" :key="idx">
        <td
          v-for="col in columns"
          :key="col.key"
          :class="getAlignClass(col.align)"
        >
          {{ row[col.key] }}
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  data: Array,
  columns: Array,
  striped: Boolean,
  hover: Boolean,
  bordered: Boolean,
});

const tableClasses = computed(() => {
  return [
    'table',
    props.striped && 'table-striped',
    props.hover && 'table-hover',
    props.bordered && 'table-bordered',
  ].filter(Boolean).join(' ');
});

function getAlignClass(align) {
  if (align === 'right') return 'table-numeric';
  if (align === 'center') return 'table-center';
  return '';
}
</script>

<!-- Usage -->
<Table
  :data="users"
  :columns="columns"
  striped
  hover
/>

API Reference

Table Classes

ClassDescription
.tableBase table styles (required)
.table-stripedAlternate row background colors
.table-borderedAdd borders to all cells
.table-borderlessRemove all borders
.table-hoverAdd hover effect to rows
.table-compactReduce cell padding
.table-comfortableIncrease cell padding
.table-selectableMake rows selectable with cursor
.table-stickySticky table header
.table-surfaceUse surface background color
.table-responsiveHorizontal scroll wrapper

Column Classes

ClassDescription
.table-numericRight-align with tabular numbers
.table-centerCenter-align content
.table-checkboxCheckbox column (width: 3rem)
.table-actionsActions column (right-aligned)

Row Classes

ClassDescription
.selectedMark row as selected (use with .table-selectable)

Sort Classes

ClassDescription
.table-sortSortable column header
.table-sort-iconSort indicator icon
.table-sort-ascAscending sort state
.table-sort-descDescending sort state

Other Classes

ClassDescription
.table-captionTable caption styling

Combinations

Combined Classes Example 1

Combined Classes Example 2

  • Card - Container for tables
  • Badge - Status indicators in tables
  • Button - Action buttons in table cells

See Also