PowerTable is a JavaScript component that turns JSON data into an interactive HTML table. This facilitates manual inspection, sorting, filtering, searching, and editing of the data. PowerTable is inspired by DataTables and powered by Svelte.

🚨  PowerTable is still in Beta!

• No runtime dependencies
• Sorting (single- and multi-column + custom sorting)
• Filtering (per column and global + RegEx + custom filtering)
• Inline editing
• Re-arrangeable layout segments
• Optional styling
• Custom parsing
• Local and remote data source
• Usable as Svelte component or ES module

First, install with Node Package Manager (NPM):

npm i muonw/powertable

Then, import in your svelte file (e.g. src/routes/+page.svelte):

<script>
import { PowerTable } from '@muonw/powertable';
let ptData= [{"id": 1, "name": "Fay"}, {"id": 2, "name": "Luca"}];
</script>

<div class="MuonW PowerTable">
    <PowerTable {ptData} />
</div>

<style global>
@import '../../node_modules/@muonw/powertable/package/dist/power-table.css';
</style>

PowerTable is primarily designed for Svelte projects as a modern alternative to DataTables. If your project is not based on Svelte you can simply paste the code below in an HTML file (e.g. index.html) to generate a table.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/muonw/powertable/package/dist/power-table.css">

<div class="MuonW PowerTable">
    <div id="table1"></div>
</div>

<script type="module">
import { PowerTable } from 'https://cdn.jsdelivr.net/gh/muonw/powertable/package/dist/power-table.js'
let ptData= [{"id": 1, "name": "Fay"}, {"id": 2, "name": "Luca"}];

const myTable = new PowerTable({
    target: document.getElementById('table1'),
    props: { ptData }
});
</script>

Integration with JavaScript frameworks (e.g. React, Vue, etc.) may require steps that are not covered in this repository. Please see this example that demonstrates a basic usage with React.

To see the live demos, visit https://muonw.github.io/powertable/examples/example1

The PowerTable component accepts three optional props: ptInstructs, ptOptions, and ptData.

<PowerTable {ptInstructs} {ptOptions} {ptData} />

❶ The prop ptInstructs is an array of objects that sets the column attributes. All properties except for key are optional.

Example:

let ptInstructs = [
    {key: 'id'},
    {key: 'name', title: 'Full Name'},
    {key: 'gender', title: 'Gender', sortable: false},
];

❷ The prop ptOptions is an object that allows adjusting various features of the table. All properties are optional.

Example:

let ptOptions = {
    uniquePrefix: 'myTable1',
    rowsPerPageOptions: [10, 100, 200],
    footerText: false,
    footerFilters: false,
}

❸ The prop ptData is an array of objects containing the data to be displayed in the table. The property names must match the value of the key properties in ptInstructs. All property values including boolean, number, object, and array values will be converted to string.

Example:

let ptData = [
    {"id": 1, "name": "Fay"},
    {"id": 2, "name": "Luca"}
];

The events rowClicked or rowDblClicked will be dispatched when a row is clicked or double clicked, respectively. Both return an object with a property named event containing the mouse event, and data containing the row data from ptData.

<PowerTable
    {ptData}
    on:rowClicked="{(d) => console.log('click', d)}"
    on:rowDblClicked="{(d) => console.log('dblclick', d)}"
/>

Named slots can be used to override some default HTML elements.

Example:

<PowerTable {ptData}>
    <div slot="noResults">There is no records to show!</div>
    <div slot="rendering">Please wait while table is being rendered...</div>
    <div slot="settings">
        <div data-name="item">Toggle control column</div>
    </div>
</PowerTable>

You can add styling with SCSS or CSS. In order for the following solutions to work, wrap the table in an element with the class MuonW PowerTable.

With SCSS: The default styling can be applied by importing package/styles/power-table.scss and Mascara in your layout (i.e. routes/+layout.svelte).

<style lang="scss" global>
@import '../../node_modules/@muonw/mascara/package/styles/index.scss';
@import '../../node_modules/@muonw/powertable/package/styles/power-table.scss';

/* To make search and filter text boxes smaller */
.MuonW.PowerTable {
    tr[data-name=filters-tr] {
        input{
            @extend .compact;
        }
    }
    tr[data-name=filters-tr] {
        input{
            @extend .compact;
        }
    }
    div[data-name=search-container], div[data-name=edit-block] {
        label{
            @extend .embedded;
            & > span, &:focus-within > span {
                @extend .label-text;
            }
        }
    }
    div[data-name=edit-block] {
        button[data-name=edit-submit] {
            margin-top: 8px;
        }
    }
}
</style>

With CSS:

<style global>
@import '../../node_modules/@muonw/powertable/package/dist/power-table.css';
</style>

For more detailed implementations, see the examples at https://muonw.github.io/powertable/examples/example1

getData: once the component is mounted, getData can be called to retrieve the props as well as search and filter data. This function returns the following object:

{
    options: ➤ current options (same structure as `ptOptions`),
    instructs: ➤ the instructs (same structure as `ptInstructs`),
    data: ➤ current contents (same structure as `ptData`),
    search: {
        isRegex: ➤ true or false (boolean),
        value: ➤ the search phrase (string)
    },
    filters: {
        [➤ `ptInstruct` key]: {
            isRegex: ➤ true or false (boolean),
            value: ➤ the filter phrase
        },
        ...
    }
}

getRegexParts receives a string RegEx and returns an object containing the RegEx delimiter, pattern, and flags as shown below. If the string is not a valid RegEx, false will be returned.

{
    delimiter: ➤ string,
    pattern: ➤ string,
    flags: ➤ string
}

Parts of the manual (includes information regarding layout customization and displaying remote/API data) have been moved to separate files located at https://github.com/muonw/powertable/tree/main/static/manual.

This repository exists to develop and maintain a tool that fulfills the following requirements:

• Displays structured JSON data in an HTML table that...
  • is easy to navigate with mouse and/or keyboard.
  • is easy to interact with on a desktop monitor.
  • renders 1000+ rows without noticeable delay.
  • can display and modify remote data.
• Is based on Svelte.
• Is easy to learn and use.
• Runs in latest versions of Firefox ESR, Chromium, and Safari.
• Does not include a web server.
• Does not apply CSS styles by default.
• Does not include third party runtime dependencies.

• Fetch remote data
• Inline editing
• Improve search

Areas of high priority:

• Accessibility
• Code quality
• Tests