Table

A flexible and customizable way to display data in a structured format. It supports various styling options and interactive features to enhance usability.

About

The Table component is highly customizable and automatically generates tables from object/JSON data if needed. It supports custom styling, column alignment, and interactive features, making it easy to display structured data efficiently. Whether for simple data presentation or complex tables with sorting and filtering, this component ensures a clean and responsive layout.

Example

The Table is a powerful, versatile component. You can create a table in many ways. For example:

  • Using data
  • Using snippet
  • Manually using the components

Setup

At first import the relevant components of the table.

Svelte 
<script>
  import { Table, THead, TBody, TR, TH, TD } from "theui-svelte";
</script>

Example: Using Props

The Table component allows you to generate tables dynamically using data. This approach is useful when you have structured data and want to render it efficiently without manually defining each row and column. This method ensures your table remains dynamic and adaptable to different datasets.

Pass the headers, data, and keys as props to the Table component.

  • headers: string[] - An array of column headers.
  • data: object[] - An array of objects representing table rows.
  • keys: string[] - An array of keys that map data fields to columns.
Heading 1Heading 2Heading 3Heading 4
Data 11Data 12Data 13Data 14
Data 21Data 22Data 23Data 24
Data 31Data 23Data 33Data 43
Svelte 
<script>
  let headers = ["Heading 1", "Heading 2", "Heading 3", "Heading 4"];
  let data = [
    {item1: "Data 11", item2: "Data 12", item3: "Data 13", item4: "Data 14"},
    {item1: "Data 21", item2: "Data 22", item3: "Data 23", item4: "Data 24"},
    {item1: "Data 31", item2: "Data 23", item3: "Data 33", item4: "Data 43"},
  ];
  let keys = ["item1", "item2", "item3", "item4"];
</script>

<!-- Option 1 -->
<Table {headers} {data} {keys} />

<!-- Option 2 -->
<Table>
  <THead {headers} />
  <TBody {data} {keys} />
</Table>

<!-- Option 3 -->
<Table {headers}>
  <TBody>
    {#each data as d}
      <TR data={d} {keys} />
    {/each}
  </TBody>
</Table>

Example: Using Components

Instead of props or dynamically looping through the data, the table content is written manually using the TBody, TR, and Cell components.

  • <TBody> - Contains the table rows.
  • <TR> - Represents a table row.
  • <TD> - Represents a table data containing the actual data.
Heading 1Heading 2Heading 3Heading 4
Data 11Data 12Data 13Data 14
Data 21Data 22Data 23Data 24
Data 31Data 23Data 33Data 43
Svelte 
<Table {headers}>
  <THead>
    <TR>
      <TH>Heading 1</TH>
      <TH>Heading 2</TH>
      <TH>Heading 3</TH>
      <TH>Heading 4</TH>
    </TR>
  </THead>
  <TBody>
    <TR>
      <TD>Data 11</TD>
      <TD>Data 12</TD>
      <TD>Data 13</TD>
      <TD>Data 14</TD>
    </TR>
    ...
    ...
  </TBody>
</Table>

Custom Header

If you need custom headers or anything other than text in the header just put your custom items in the TH component. For example:

Sort Sort
Svelte 
<Table>
  <THead>
    <TR>
      <TH class="items-center gap-2">
        Sort
        <Svg class="inline">
          <path d="M3.5 12.5a.5.5 0 0 ... 0 1h1a.5.5 0 0 0 0-1z"/>
        </Svg>
      </TH>
      <TH class="items-center gap-2">
        Sort
        <Svg class="inline">
          <path d="M3.5 2.5a.5.5 0 0 0-1 ... 1h1a.5.5 0 0 0 0-1z"/>
        </Svg>
      </TH>
    </TR>
  </THead>
</Table>

Table Border

The border prop controls where borders appear in the table. By default, it is set to "both". Setting it to "x" adds borders only between columns, while "y" applies borders only between rows. The default option, "both", adds borders between both rows and columns, and "none" removes all borders. This prop allows you to customize the table’s appearance based on your design preferences.

Horizontal border: border="x"
Heading 1Heading 2Heading 3Heading 4
Data 11Data 12Data 13Data 14
Data 21Data 22Data 23Data 24
Data 31Data 23Data 33Data 43
Vertical border: border="y"
Heading 1Heading 2Heading 3Heading 4
Data 11Data 12Data 13Data 14
Data 21Data 22Data 23Data 24
Data 31Data 23Data 33Data 43
No border: border="none"
Heading 1Heading 2Heading 3Heading 4
Data 11Data 12Data 13Data 14
Data 21Data 22Data 23Data 24
Data 31Data 23Data 33Data 43
Svelte 
<Table {headers} {data} {keys} border="x" />
<Table {headers} {data} {keys} border="y" />
<Table {headers} {data} {keys} border="none" />

Table Spacing

The space prop adjusts the cell padding to control the overall table spacing, affecting how compact or spacious the table appears.

  • "compact" - Reduces padding for a denser layout, making the table more space-efficient.
  • "default" (Default value) - Uses the standard padding, providing a balanced look.
  • "comfortable" - Increases padding for a more spacious and readable layout.
Compact spacing: space="compact"
Heading 1Heading 2Heading 3Heading 4
Data 11Data 12Data 13Data 14
Data 21Data 22Data 23Data 24
Data 31Data 23Data 33Data 43
Comfortable spacing: space="comfortable"
Heading 1Heading 2Heading 3Heading 4
Data 11Data 12Data 13Data 14
Data 21Data 22Data 23Data 24
Data 31Data 23Data 33Data 43
Svelte 
<Table {headers} {data} {keys} space="compact" />
<Table {headers} {data} {keys} space="comfortable" />

This prop allows you to fine-tune the table’s appearance based on your design needs.

Stripe Rows

The stripe prop adds alternating background colors to table rows, improving readability and visual distinction between rows. By default, this feature is disabled (undefined), meaning all rows have the same background.

  • "even" - Applies striping to even-numbered rows, making them visually distinct from odd rows.
  • "odd" Applies striping to odd-numbered rows, enhancing readability by differentiating them from even rows.
  • Custom class names - You can specify a class name instead of predefined values to apply custom styling. This allows full control over the appearance of striped rows, making it easy to match your design needs.
Striped even rows: stripe="even"
Heading 1Heading 2Heading 3Heading 4
Data 11Data 12Data 13Data 14
Data 21Data 22Data 23Data 24
Data 31Data 23Data 33Data 43
Striped odd rows: stripe="odd"
Heading 1Heading 2Heading 3Heading 4
Data 11Data 12Data 13Data 14
Data 21Data 22Data 23Data 24
Data 31Data 23Data 33Data 43
Striped even rows with custom classes: stripe="<CUSTOM CLASSES>"
Heading 1Heading 2Heading 3Heading 4
Data 11Data 12Data 13Data 14
Data 21Data 22Data 23Data 24
Data 31Data 23Data 33Data 43
Striped odd rows with custom classes: stripe="<CUSTOM CLASSES>"
Heading 1Heading 2Heading 3Heading 4
Data 11Data 12Data 13Data 14
Data 21Data 22Data 23Data 24
Data 31Data 23Data 33Data 43
Svelte 
<!-- Striped even rows -->
<Table {headers} {data} {keys} stripe="even" />
<!-- Striped odd rows -->
<Table {headers} {data} {keys} stripe="odd" />
<!-- Striped even rows with custom classes -->
<Table {headers} {data} {keys} stripe="even:bg-green-100 dark:even:bg-green-900" />
<!-- Striped odd rows with custom classes -->
<Table {headers} {data} {keys} stripe="odd:bg-green-100 dark:odd:bg-green-900" />

Hoverable Rows

The hover prop enables a visual highlight effect when users hover over table rows. By default, this feature is disabled (undefined), meaning no hover effect is applied.

  • true - When set to true, the row background color changes on hover, improving user experience and readability.
  • Custom class names - Instead of using the default hover effect, you can pass a custom class to define your own hover styles, allowing for more design flexibility.
Hoverable rows: hover={true}
Heading 1Heading 2Heading 3Heading 4
Data 11Data 12Data 13Data 14
Data 21Data 22Data 23Data 24
Data 31Data 23Data 33Data 43
Hoverable rows with custom classes: hover="<CUSTOM CLASSES>"
Heading 1Heading 2Heading 3Heading 4
Data 11Data 12Data 13Data 14
Data 21Data 22Data 23Data 24
Data 31Data 23Data 33Data 43
Svelte 
<!-- Hoverable rows -->
<Table {headers} {data} {keys} hover={true} />
<!-- Hoverable rows with custom classes -->
<Table {headers} {data} {keys} hover="hover:bg-red-100" />

Customization

You can use the following props to customize the table’s appearance, allowing you to style the table and its elements as needed.

  • borderColor - Defines the border color for the table. By default, it is set to "border-gray-200/80 dark:border-gray-800/80", ensuring a subtle contrast in both light and dark modes. You can override this with any Tailwind CSS border color class.
  • trHeadClasses - Adds custom classes to the table header row ((<tr> inside <thead>)). This allows you to style the header separately, such as applying background colors, text styles, or spacing adjustments.
  • trClasses - Applies custom classes to all table body rows (<tr> inside <tbody>). Use this to control row styling, such as padding, text alignment, or hover effects.
  • tdClasses - Adds custom classes to all table cells (<td>), enabling precise control over text size, padding, alignment, or other styles.

These props provide flexibility in styling, making it easy to adapt the table to different designs and themes.

Configuration