🧠 Wise Table

A powerful React table library designed for modern data-driven applications


> 🚧 Beta Release - Use with Caution
> This project is a component library developed for implementing the back-office system of Wisely Company. As it is currently in beta version, it may not be suitable for public use yet. Comprehensive and finalized documentation will be available with version 1.0.0.

Wise Table is a high-performance React table library designed for modern web applications. Built with both user experience and developer convenience in mind, featuring React Query integration and Zod schema validation.

✨ Features

$3

- Server State Management: Built-in TanStack Query integration through CRUDActions pattern
- Automatic Caching: Leverage React Query's caching and background synchronization
- Query Integration: Seamless integration with useQuery for data fetching
- Mutation Support: Built-in support for create, update, and delete mutations

$3

- Zod Integration: Full Zod schema support for runtime validation and type inference
- TypeScript First: Complete type safety from schemas to components
- Multi-Schema Support: Separate schemas for display, create, update, and query operations
- Compile-time Safety: Catch type mismatches during development

$3

- Multi-row Selection: Built-in selection state management with bulk operations
- CRUD Operations: Complete Create, Read, Update, Delete support with reason tracking
- Smart Filtering: Advanced filtering with query string integration
- Modal-based Operations: User-friendly modals for create, update, and delete operations

$3

- Static Options: Traditional static dropdown options support
- Dynamic Options: Server-side data fetching with useSelectQuery integration
- Loading States: Built-in loading and error states for dynamic options
- Flexible Integration: Mix static and dynamic selects in the same table

$3

- Basic Types: text, number, currency, date, boolean, enum
- Advanced Types: searchableSelect, multipleSelect, textArea
- Custom Renderers: Full control over cell rendering with custom render functions
- Inline Editing: Click-to-edit functionality with type-appropriate inputs

$3

- Instant Feedback: Real-time visual feedback for data changes
- Dirty State Tracking: Clear indication of modified rows and cells
- Change Validation: Schema-based validation during editing
- Optimistic Updates: Immediate UI updates with server synchronization

$3

- Component-based Architecture: Modular design with reusable components
- Developer-First: Built for complex business logic and back-office applications
- Customizable UI: Extensive theming and styling options
- Comprehensive TypeScript: Full type coverage for enhanced developer experience

🚀 Installation

$3

Installation

``bash


Install the library

npm install @jehwanyoo2/wise-table

Install peer dependencies

npm install @tanstack/react-query zod react react-dom clsx date-fns @hookform/resolvers react-hook-form use-debounce

Or install everything at once

npm install @jehwanyoo2/wise-table @tanstack/react-query zod react react-dom clsx date-fns @hookform/resolvers react-hook-form use-debounce
`

With other package managers:

`bash


Yarn

yarn add @jehwanyoo2/wise-table @tanstack/react-query zod react react-dom clsx date-fns @hookform/resolvers react-hook-form use-debounce

pnpm

pnpm add @jehwanyoo2/wise-table @tanstack/react-query zod react react-dom clsx date-fns @hookform/resolvers react-hook-form use-debounce

Bun

bun add @jehwanyoo2/wise-table @tanstack/react-query zod react react-dom clsx date-fns @hookform/resolvers react-hook-form use-debounce
`

$3

`bash


Clone the repository

git clone https://github.com/JeHwanYoo/wise-table.git
cd wise-table

Install dependencies with Bun

bun install

Start example app for local demo

bun run dev

Build library once

bun run build && bun run types

Or start live development (watch build/types/lint)

bun run dev:lib
``

> ⚠️ Recommended for development: follow the "Local Linking & Live Development" section to connect a consumer repo, iterate quickly, and validate changes live without publishing to npm.

For more information on installing Bun, refer to the Bun Installation Guide.

📖 Documentation

> 📝 TODO: Comprehensive documentation will be available after stable release.

$3

> 📝 TODO: Usage examples and tutorials coming soon.

$3

> 📝 TODO: Complete API documentation will be provided.