antd-shadcn-tanstack-table v1.0.5
🎯 antd-shadcn-tanstack-table
Because life's too short for slow tables! A blazingly fast table component that combines the best of TanStack Table, ShadCN UI, and Ant Design.
🤔 Why This Exists
The limitations of default Ant Design table rendering for large datasets are well-documented. Our innovative approach integrates TanStack Table's efficient data processing, ShadCN's clean and contemporary UI, and Ant Design's comprehensive feature set to deliver a superior table experience
✨ Features
🚀 Lightning-fast performance (bye-bye, laggy edits!)
🎨 Beautiful ShadCN UI components
📊 Powerful TanStack Table features
✏️ Smooth inline editing
🔍 Advanced filtering & sorting
📱 Responsive design
🎯 TypeScript support
🔧 Installation
npm install antd-shadcn-tanstack-table
🎮 Quick Start
import { NoobTanstackTable } from "antd-shadcn-tanstack-table";
const MyTable = () => {
const columns = [
{
title: "Name",
dataIndex: "name",
editable: true,
},
{
title: "Age",
dataIndex: "age",
editable: true,
},
];
const data = [
{ id: 1, name: "John Doe", age: 25 },
{ id: 2, name: "Jane Smith", age: 30 },
];
return (
<NoobTanstackTable
columns={columns}
dataSource={data}
editable={{
onDataSourceChange: (changes) => console.log(changes),
}}
/>
);
};
🔄 Migration from Ant Design Table
Most Ant Design table props work out of the box:
- columns configuration
- dataSource structure
- rowSelection behavior
- pagination settings
- Event handlers
Simply replace:
- import { Table } from 'antd';
+ import { NoobTanstackTable } from 'antd-shadcn-tanstack-table';
- <Table />
+ <NoobTanstackTable />
🤓 Why "NoobTanstack"?
We're humble enough to admit we're still learning and growing. This project is actively evolving, just like our skills! (Plus, it's way more fun than calling it "SuperAdvancedMegaTable3000")
🤝 Contributing
PRs are welcome! We're all noobs here, learning and growing together