Muonw Powertable

Overview

PowerTable is a Svelte component that allows the user to turn JSON data into an interactive HTML table. It provides features such as sorting, filtering, searching, and editing of the data. Inspired by DataTables and powered by Svelte, PowerTable offers a convenient way to analyze and manipulate data in a table format.

Features

• Sorting of data (single- and multi-column + custom sorting)
• Filtering of data (per column and global + RegEx + custom filtering)
• Inline editing of table cells
• Re-arrangeable layout segments for customization
• Optional styling for better visual presentation
• Custom parsing options for different data formats
• Support for both local and remote data sources

Installation

To use PowerTable in your projects, follow these steps:

1. Set the correct node package registry for @muonw packages:

npm config set @muonw:registry https://npm.pkg.github.com/

2. Install the PowerTable package:

npm install @muonw/muonw-powertable

3. Import the PowerTable component in your Svelte files, for example:

import PowerTable from '@muonw/muonw-powertable';

4. Implement PowerTable in your SvelteKit project. Here is a basic example without any styling:

<script>
  import { onMount } from 'svelte';
  import { ptInstructs, ptData } from './data.js';

  onMount(() => {
    // Fetch or set the data for ptData
  });
</script>

<PowerTable {ptInstructs} {ptData} />

Summary

PowerTable is a powerful Svelte component that allows users to transform JSON data into an interactive HTML table. With features such as sorting, filtering, and editing, it provides a convenient way to analyze and manipulate data. Its flexibility and optional styling options make it a versatile tool for displaying and interacting with data in a tabular format.