Shadiotable

Shadiotable is a complex, flexible, and easy-to-use data table component for React. It leverages the power of TanStack Table to provide a highly customizable and performant table experience.

Features

• Customizable Columns: Easily define columns with headers and cell renderers.
• Sorting and Pagination: Built-in support for sorting and pagination.
• Flexible Data Handling: Supports any data structure by using simple column definitions.
• Typescript Support: Fully typed with TypeScript for better developer experience.
• React 18 Support: Fully compatible with React 18 and higher.

Installation

You can install shadiotable via npm or pnpm.

Using npm

npm install shadiotable
pnpm add shadiotable

Usage

Import and use shadiotable in your React components.

import React from "react";
import { BasicTable } from "shadiotable";
import { ColumnDef } from "@tanstack/react-table";

interface User {
  id: number;
  name: string;
  email: string;
}

const data: User[] = [
  { id: 1, name: "John Doe", email: "[email protected]" },
  { id: 2, name: "Jane Smith", email: "[email protected]" },
];

const columns: ColumnDef<User>[] = [
  {
    accessorKey: "id",
    header: "ID",
    cell: (info) => info.getValue(),
  },
  {
    accessorKey: "name",
    header: "Name",
    cell: (info) => info.getValue(),
  },
  {
    accessorKey: "email",
    header: "Email",
    cell: (info) => info.getValue(),
  },
];

export function App() {
  return (
    <div>
      <BasicTable columns={columns} data={data} />
    </div>
  );
}

Props

Development

If you want to contribute or develop locally, clone this repository and run:

Install dependencies

pnpm install

Build the project

pnpm build

Start the development server

pnpm dev

License

This project is licensed under the MIT License - see the LICENSE file for details.

Cukup salin dan tempelkan ke dalam file README.md di project Anda! Jika Anda memerlukan tambahan atau perubahan, beri tahu saya. 😊