Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/c-w-d-harshit/shadcn-advanced-table

A customizable and feature-rich React table component built with ShadCN UI, supporting sticky headers, sticky columns, pagination, sorting, and dynamic data fetching. Perfect for handling large datasets with ease.
https://github.com/c-w-d-harshit/shadcn-advanced-table

nextjs react shadcn-ui table tailwind

Last synced: about 4 hours ago
JSON representation

Host: GitHub
URL: https://github.com/c-w-d-harshit/shadcn-advanced-table
Owner: C-W-D-Harshit
License: mit
Created: 2024-11-16T11:15:54.000Z (2 months ago)
Default Branch: main
Last Pushed: 2024-11-29T11:58:16.000Z (about 2 months ago)
Last Synced: 2025-01-17T20:47:50.984Z (about 4 hours ago)
Topics: nextjs, react, shadcn-ui, table, tailwind
Language: TypeScript
Homepage: https://shadcn-advanced-table.cleverdeveloper.in
Size: 213 KB
Stars: 17
Watchers: 1
Forks: 2
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Shadcn Advanced Table

A powerful and customizable table component for React applications, built with Shadcn UI. This component is designed to handle large datasets while providing a smooth user experience with features like sticky headers, sticky columns, pagination, and dynamic data fetching.

## Features

- **Sticky Headers and Columns**: Keep important columns and headers always visible while scrolling.
- **Pagination**: Built-in support for pagination, suitable for large datasets.
- **Sorting**: Enable sortable columns for dynamic data presentation.
- **Dynamic Rows and Columns**: Easily define the structure of your table data.
- **Custom Cell Renderers**: Render custom components in table cells.
- **Dynamic Data Fetching**: Fetch data dynamically with server-side pagination and sorting.
- **Responsive Design**: Fully optimized for various screen sizes.
- **Shadcn UI Integration**: Styled with Shadcn components for a seamless design experience.

## Installation

Clone the repository:

```bash
git clone https://github.com/C-W-D-Harshit/shadcn-advanced-table.git
```

Install the dependencies:

```bash
npm install
```

The `AdvancedTable` component is located at `src/components/ui/advanced-table.tsx`.

## Usage

Import the `AdvancedTable` component in your React application:

```jsx
import AdvancedTable from "@/components/ui/advanced-table";
```

Use the component in your JSX:

```jsx

```

The `AdvancedTable` component is located in `src/components/ui/advanced-table.tsx`.

## Prerequisites

- React
- Next.js
- Lucide-React Icons
- Shadcn Components (Button, Checkbox, Select, Badge, etc.)
- Utility Function (cn from "@/lib/utils")

## Props

- `columns`: An array defining the structure and behavior of each column.
- `key`: Unique identifier for the column (based on the data key).
- `header`: The header text for the column.
- `sortable` (optional): Enables sorting for the column.
- `sticky` (optional): Makes the column sticky during horizontal scrolling.
- `width` (optional): Custom width for the column.
- `cellRenderer` (optional): Custom renderer for cell values (receives value and row).
- `data`: An array of objects representing the rows in the table.
- `dynamic` (optional): A boolean flag to enable dynamic data fetching.
- `onFetchData` (optional): A function to fetch data dynamically when dynamic is true. Receives an object containing:
- `page`: Current page number.
- `itemsPerPage`: Number of items per page.
- `sortColumn` (optional): Column being sorted.
- `sortDirection` (optional): Sorting direction (asc or desc).

Returns a Promise resolving to an object containing:

- `data`: Fetched data array.
- `totalItems`: Total number of items.

## Contributing

Contributions are welcome! Feel free to submit issues or pull requests to enhance the table’s functionality.

## License

This project is licensed under the MIT License.