Skip to content

Latest commit

 

History

History
93 lines (64 loc) · 2.74 KB

README.md

File metadata and controls

93 lines (64 loc) · 2.74 KB
Raw

TeaTable

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 display, CSV export, and pagination.

Just add your data and it will facilitate read, create, update, delete, and search operations while also providing a responsive UI.

Installation

To include the library in your project, you can use the following command:

npm i teatable

If you want to use it without importing, you can comment out the 'export default' line in the code and include it in your project.

Features

  • CRUD Operations: Functions for adding, reading, updating, and deleting data.
  • Sorting: Sorting by the relevant column when clicking on each column header.
  • Searching: Instant searching within table data.
  • Full Screen: Displaying the table in full-screen mode.
  • CSV Export: Exporting table data in CSV format.
  • Pagination: Navigating through large data sets page by page.

Usage

To use the library, first import the TeaTable class into your project and create an instance.

import TeaTable from 'teatable';

const options = {
    data: [ // data here
        { id: 1, name: Sample Data 1", extra: "Extra Info 1" },
        { id: 2, name: "Sample Data 2" }
    ],
    themeColor : "#6967ce",

    rowsPerPage: 5, // Optional: Number of rows per page (default: 5)
    // Optional: Callback functions
    onCreate: (newData) => { console.log(newData) },
    onEdit: (id, newData) => { console.log(id, newData) },
    onDelete: (id) => { console.log(id) },
    // language support
    txtAdd     : "Add",
    txtUpdate  : "Update",
    txtDel     : "Delete",
    txtEdit    : "Edit",
    txtAct     : "Actions",
    txtSearch  : "Search...",
    txtPage    : "Page",
    txtConfirm : "Are you sure to delete this data?"
};

const myTable = new TeaTable('tableContainerId', options);

This code creates a table within the HTML element with the specified tableContainerId ID.

Styling

To visually enhance the library, include the following CSS file in your project:

<link rel="stylesheet" href="node_modules/teatable/assets/style.css">

or

import 'teatable/assets/style.css';

What's Next?

  • Dark Mode or Theme Selector ADDED
  • Multilanguage support ADDED
  • Async pagination support

Links

Donate

Licence

This project is licensed under the MIT License by Hakki Cengiz.