Systeme.io Task - Table component

🐳 DEMO: https://systeme-io-task.vercel.app/

Dive into the beauty of custom UI components with our NextJS Custom Table Component! This project leverages the power of NextJS, TailwindCSS, and TypeScript to deliver a sleek, scalable table component inspired by Tanstack ShadTable, without using any external libraries. Our focus is on craftsmanship and detailed custom functionality.

🔍 Features:

• ✅ Customizable columns (Table and columns props)
• ✅ Filtering data (via useTable hook)
• ✅ Dynamic debounced search filters, and faceted filters (filterFields prop)
• ✅ Dynamic Table-Toolbar with search, filters

---

• ⚡ Next.js with App Router support
• 🔥 Type checking TypeScript
• 💎 Integrate with Tailwind CSS
• 🎨 Shadcn/UI reusable components built using Radix UI
• ✅ Strict Mode for TypeScript and React 18
• ⌨️ Form with React Hook From
• 🔴 Validation library with Zod
• 📏 Linter with ESLint
• 💖 Code Formatter with Prettier
• 🦊 Husky for Git Hooks
• 🚫 Lint-staged for running linters on Git staged files
• 🚓 Lint git commit with Commitlint
• 👷 Run checks with GitHub Actions - CI
• 💡 Absolute Imports using ~ prefix
• 🐳 Docker Integration
• 🌐 Deployed on Vercel
• 🌙 Light/Dark Theme support

Running Locally

1. Clone the repository

git clone https://github.com/velenyx/systeme.io-task

2. Install dependencies using yarn

corepack enable
yarn set version from sources
yarn

3. Copy the .env.example to .env and update the variables.

cp .env.example .env

4. Start the development server

yarn dev

Open http://localhost:3000 with your favorite browser to see your project.

Project structure

├── README.md                       # README file
├── .github                         # GitHub folder
├── .husky                          # Husky configuration
├── public                          # Public assets folder
├── src
│   ├── app                         # Next JS App (App Router)
│   ├── components                  # Components specific to project
│   ├── entities                    # Business entities
│   │   ├── api                     # API calls for entities
│   │   ├── types                   # TypeScript types
│   ├── shared                      # Code shared across different parts of the application.
│   │   ├── api                     # API client
│   │   ├── const                   # Constants
│   │   ├── lib                     # Utility library: Common functions and helpers used across the app.
│   │   ├── types                   # Shared TypeScript types: Common type definitions used in multiple areas of the app.
│   │   ├── ui                      # Shadcn components
├── Dockerfile                      # Docker configuration
├── tailwind.config.ts              # Tailwind CSS configuration
└── tsconfig.json                   # TypeScript configuration

🧞 Commands

All commands are run from the root of the project, from a terminal:

Command	Action
corepack enable	Enables Corepack to manage package managers
yarn set version from sources	Sets Yarn to the latest version from sources
yarn install	Installs dependencies
yarn dev	Starts the development server at localhost:3000
yarn build	Builds the application for production usage
yarn start	Starts a Node.js server for the production build
yarn lint	Runs the linter on the project files
yarn lint:ts:check	Checks ESLint errors
yarn lint:ts:fix	Fixes ESLint issues
yarn format:check	Checks formatting rules on all files
yarn format:fix	Applies formatting rules to all files
yarn typecheck	Performs a type check on TypeScript files
yarn prepare	Sets up Husky for git hooks

⭐ Show Your Support

If this test project has helped or inspired you, please consider giving it a 💫 on GitHub. Or, if you simply liked it, a star is also much appreciated!

This section provides a friendly reminder to users about supporting the project, fostering a positive community interaction.