DEV Community

Cover image for TeaTable: Create Dynamic Crud Table Paginated Sorted
Hakkı Cengiz
Hakkı Cengiz

Posted on • Updated on

TeaTable: Create Dynamic Crud Table Paginated Sorted

TeaTable is a JavaScript library that allows you to quickly and easily create dynamic tables for your web applications. It supports CRUD operations, sorting, searching, full-screen viewing, export to CSV, and pagination.

POST updated here: TeaTable: Create Dynamic Crud Table Paginated Sorted Featured

Installation
npm i teatable

Features

  • Fully customizable, adding custom style.
  • CRUD Operations: Data insertion, reading, updating and deleting functions.
  • Sorting: Sorting by the relevant column when each column header is clicked.
  • Search: Instant search on table data.
  • Full Screen: View the table in full screen mode.
  • Export to CSV: Export table data in CSV format.
  • Paging: Page-by-page navigation for large data sets

Usage

import TeaTable from 'teatable';

const options = {
    data: [...], // Başlangıç veri dizisi
    theme: "default", // "theme1" tema değiştirebilirsiniz
    rowsPerPage: 5, // Opsiyonel: Sayfa başına satır sayısı (varsayılan: 5)
    // Opsiyonel: Callback fonksiyonları
    onCreate: (item) => { /* ... */ },
    onEdit: (item, index) => { /* ... */ },
    onDelete: (item, index) => { /* ... */ }
};

const myTable = new TeaTable('tableContainerId', options);
Enter fullscreen mode Exit fullscreen mode

What's Next?

  • Dark Mode or Theme Selector
  • Multilanguage support

Links

Top comments (4)

Collapse
 
mellen profile image
Matt Ellen • Edited

Nice intro article. Did you know you can embed the codepen with the embed tag: {% embed https://codepen.io/hkkcngz/pen/vYbaYXa %}

Collapse
 
hkkcngz profile image
Hakkı Cengiz

thanks for that I am adding :)

Collapse
 
hkkcngz profile image
Hakkı Cengiz

{% codepen https://codepen.io/hkkcngz/pen/vYbaYXa %} I couldnt something went wrong...

Thread Thread
 
mellen profile image
Matt Ellen

It was working for me in preview. The embed version wasn't for some reason, but {% codepen ... %} should be fine