Marble

<nomadx-table> is a set of vanilla web-components to simplify the creation of awesome, accessible HTML tables.

Try the demo!

For Developers:

Marble automatically creates rich HTML tables from your dataset. The flexible <nomadx-data> component allows you to generate tables through simple markup or bind data from Javascript, supporting CSV or TSV format, Markdown, JSON, and 2D Arrays.

Here's a minimal example using CSV format in your markup:

<nomadx-data>
  <nomadx-table-data slot="content">
    Column A, Column B, Column C, Column D
    0, true, Hello, World!
    2, false, Foobar, Bazbing
  </nomadx-table-data>
</nomadx-data>

Marble allows you to declare sortable columns, and will automatically handle sorting for you.

Marble tables are clean, responsive, and adaptable to any theme. Under the hood, we only apply a CSS reset and minimal styling. Marble avoids the ShadowDOM to give you more flexibility in styling.

marble-table table {
  /* Style away! */
}

For Your Users:

Marble comes pre-baked with a11y best practices like roving focus, keyboard navigation, and screen-reader support. Marble's goal is to make tables that work exactly like you'd expect them to, so we followed the W3C's Best Practices and then added even more functionality (like beautiful clipboard support, cell selection, and meta sequences for keyboards.)

Using this component

Script tag

• Publish to NPM
• Drop this <script src='https://unpkg.com/[email protected]/dist/marbletable.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Node Modules

• Run npm install marble-table --save
• Put a script tag similar to this <script src='node_modules/marble-table/dist/marbletable.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

In a stencil-starter app

• Run npm install marble-table --save
• Add an import to the npm packages import marble-table;
• Then you can use the element anywhere in your template, JSX, html etc