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);
What's Next?
- Dark Mode or Theme Selector
- Multilanguage support
Links
- NpmJs - https://www.npmjs.com/package/teatable
- Github - https://github.com/hkkcngz/teatable
- CodePen - https://codepen.io/hkkcngz/pen/vYbaYXa
Top comments (4)
Nice intro article. Did you know you can embed the codepen with the embed tag:
{% embed https://codepen.io/hkkcngz/pen/vYbaYXa %}
thanks for that I am adding :)
{% codepen https://codepen.io/hkkcngz/pen/vYbaYXa %}
I couldnt something went wrong...It was working for me in preview. The embed version wasn't for some reason, but
{% codepen ... %}
should be fine