dr.table

pure, small and estetics data table. available in vanilla, vue, react and svelte.

Demo : https://codepen.io/alanshalih/pen/mdXNPNP

Installation

npm i dr.table

Usage

1. Vanilla JS

<table id="my-table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Phone</th> 
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Maulana Shalihin</td>
            <td>[e-mail]</td>
            <td>6281351000000</td> 
        </tr> 
    </tbody>
</table>

<script>

import DRTable from "dr.table"

new DRTable("#my-table")

</script>

Vue.js 3

<script setup> 
import DRTable from 'dr.table/vue'
</script>

<template>
    <DRTable>
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Phone</th> 
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Maulana Shalihin</td>
                <td>[e-mail]</td>
                <td>6281351000000</td> 
            </tr> 
        </tbody>
    </DRTable>
</template>

React

import Table from "dr.table"
import "dr.table/style.css" 
import {  useEffect } from "react";

export default function DRTable(props) { 

    useEffect(() => {
        //Runs only on the first render
        const mytable = new Table("#dr-table")
    }, []);
    
    return ( 
        
        <div> 
            <table  className="invisible" id="dr-table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Phone</th> 
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Maulana Shalihin</td>
                        <td>[e-mail]</td>
                        <td>6281351000000</td> 
                    </tr> 
                </tbody>
            </table>
        </div>
                
    )
}

Svelte

<script> 
import DRtable from "dr.table/svelte"
</script>

 
<DRtable>
    <thead>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Phone</th> 
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Maulana Shalihin</td>
            <td>[e-mail]</td>
            <td>6281351000000</td> 
        </tr> 
    </tbody>
</DRtable> 

Credit

rewrite from JSTable https://github.com/jstable/JSTable