@thaddeusjiang/react-table NPM

Welcome to @thaddeusjiang/react-table 👋

React Table Component, if you need resize the column, you should use this component.

features

out of box react table component with beautiful style.
resize column size of table.
automatic animations
override cellClassName

🏠 Homepage

Install

yarn add @thaddeusjiang/react-table @tanstack/react-table

Usage

if you don't use Tailwind CSS

import { DataTable } from '@thaddeusjiang/react-table';
import '@thaddeusjiang/react-table/dist/index.css';

<DataTable columns={columns} data={data} sort={['name', 'asc']} />;

if you use Tailwind CSS

import { DataTable } from '@thaddeusjiang/react-table';

<DataTable columns={columns} data={data} sort={['name', 'asc']} />;

modify tailwind.config.js

// tailwind.config.js
+ const path = require("path");

module.exports = {
  content: [
    "./src/**/*{js,ts,jsx,tsx}",
+    path.join(
+      require.resolve("@thaddeusjiang/react-table"),
+      "../**/*.{js,ts,jsx,tsx}"
+    ),
  ],
  theme: {},
  plugins: [],
};