Table Wrapper

<wa-table-wrapper>

Experimental

Table Wrapper can be used to extend a simple Table with interactive functions

  
            First Column
            Second Column
            Thrid Column
        
          Hello 200
          Alpha
          3
        
          Hello 20
          Gamma
          40
        
          Hello 1
          Delta
          15
        
          Hello
          Zeta
          4

First Column	Second Column	Thrid Column
Hello 200	Alpha	3
Hello 20	Gamma	40
Hello 1	Delta	15
Hello	Zeta	4

<wa-table-wrapper searchable sortable>
  <table>
    <thead>
        <tr>
            <th>First Column</th>
            <th>Second Column</th>
            <th>Thrid Column</th>
        </tr>
    </thead>

    <tbody>
        <tr>
          <td>Hello 200</td>
          <td>Alpha</td>
          <td>3</td>
        </tr>
        <tr>
          <td>Hello 20</td>
          <td>Gamma</td>
          <td>40</td>
        </tr>
        <tr>
          <td>Hello 1</td>
          <td>Delta</td>
          <td>15</td>
        </tr>
        <tr>
          <td>Hello</td>
          <td>Zeta</td>
          <td>4</td>
        </tr>
    </tbody>
  </table>
</wa-table-wrapper>

Importing

Link to This Section

If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick a component manually, use one of the following snippets.

CDN

npm

Self-Hosted

React

Import this component directly from the CDN:

import 'https://ka-f.webawesome.com/webawesome@0.17.0/components/table-wrapper/table-wrapper.js';

After installing Web Awesome via npm, import this component:

import '@awesome.me/webawesome/dist/components/table-wrapper/table-wrapper.js';

If you're self-hosting Web Awesome, import this component from your server:

import './webawesome/dist/components/table-wrapper/table-wrapper.js';

To import this component for React 18 or below, use the following code:

import WaTableWrapper from '@awesome.me/webawesome/dist/react/table-wrapper/index.js';

Slots

Link to This Section

Learn more about using slots.

Name	Description
(default)	The default slot. - Place here the table

Attributes & Properties

Link to This Section

Learn more about attributes and properties.

Name	Description	Reflects
`searchable` `searchable`	Wenn set searchField is shown Type `boolean` Default `false`
`sortable` `sortable`	Wenn set table header is sortable Type `boolean` Default `false`

CSS Parts

Link to This Section

Learn more about CSS parts.

Name	Description	CSS selector
`search`	The component's searcg input.	`::part(search)`

Dependencies

Link to This Section

This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.

Need a hand?

Report a bug

Ask for help

Table Wrapper

Importing

Slots

Attributes & Properties

CSS Parts

Dependencies

Quick Links

Recent Searches