@rubi_who/shadcn-table-pagination
Version:
A reusable Shadcn DataTable component with pagination
58 lines (49 loc) • 1.63 kB
Markdown
# shadcn-datatable-pagination
A flexible and customizable pagination solution for Shadcn UI-based data tables, leveraging TanStack Table's headless architecture.
#### 📦 Installation
```
npm i @rubi_who/shadcn-table-pagination
```
### 🛠️ Usage
```javascript
import { DataTable, type ColumnDef } from "@rubi_who/shadcn-table-pagination"
const columns: ColumnDef<any>[] = [
{
accessorKey: "id",
header: "ID",
},
{
accessorKey: "name",
header: "Name",
},
{
accessorKey: "email",
header: "Email",
},
];
const data = [
{ id: "dev-1", name: "John Doe", email: "Jon@gmail.com" },
{ id: "dev-2", name: "John Doe", email: "Jon@gmail.com" },
{ id: "dev-3", name: "John Doe", email: "Jon@gmail.com" },
{ id: "dev-4", name: "John Doe", email: "Jon@gmail.com" },
{ id: "dev-5", name: "John Doe", email: "Jon@gmail.com" },
];
export default function TestLibPage() {
return (
<div className="container">
<h1 className="text-2xl">Test Library Page</h1>
<p>This page is used to test the library functionality.</p>
<DataTable columns={columns} data={data} />
</div>
);
}
```
### 🔮 Example Output:

### 🦷 Features
- customize items per page on the table
- text for no data available for the table
- customize styling using tailwind classes
<img src="https://github.com/user-attachments/assets/1cba9729-8774-4131-948c-56dcfb676128" width="300" height="150">
### 📄 License
MIT