z-table-ui

A framework-agnostic table generator component. This simple table generator allows you to dynamically generate HTML tables using user-provided column definitions and data. The library is designed to be used with React.js, Angular, and plain HTML.

Installation

You can install z-table-ui from npm:

npm install z-table-ui

React.js

Install the package:

npm install z-table-ui

Import and use it in your React component:

import React from "react";
import { createTable } from "z-table-ui";
import "z-table-ui/dist/table.css";

const App = () => {
  const tableColumns = [
    { title: "Serial No", dataIndex: "serialNo" },
    { title: "Name", dataIndex: "name" },
    { title: "Age", dataIndex: "age" },
    { title: "Email", dataIndex: "email" },
  ];

  const tableData = [
    { serialNo: 1, name: "Hari", age: 25, email: "[email protected]" },
    { serialNo: 2, name: "Guru", age: 26, email: "[email protected]" },
    { serialNo: 3, name: "Balaji", age: 23, email: "[email protected]" },
  ];

  React.useEffect(() => {
    createTable(tableColumns, tableData, "#table-container");
  }, []);

  return <div id="table-container"></div>;
};

export default App;