tablecn

If you prefer to manage the database and dev server manually, follow these steps:

1. Clone the repository and enter the directory.
2. Install dependencies using pnpm.
3. Copy .env.example to .env and update it with your specific database credentials.
4. Start the PostgreSQL container using pnpm db:start.
5. Push the schema and seed data using pnpm db:setup.
6. Start the Next.js development server using pnpm dev.

git clone https://github.com/sadmann7/tablecn
cd tablecn
pnpm install
cp .env.example .env
pnpm db:start
pnpm db:setup
pnpm dev

To quickly get the project running with a pre-configured PostgreSQL instance via Docker, follow these steps:

1. Clone the repository and enter the directory.
2. Copy the environment variables from the example file.
3. Run the ollie command to automate dependency installation, starting the Docker PostgreSQL instance, pushing the schema, and seeding sample data.

git clone https://github.com/sadmann7/tablecn
cd tablecn
cp .env.example .env
pnpm ollie

The multiplayer features require a separate deployment using PartyKit. Use the deploy:multiplayer command to deploy.

Important: After deploying, you must set the NEXT_PUBLIC_PARTYKIT_HOST environment variable in your deployment environment to point to your PartyKit host.

pnpm deploy:multiplayer

To run the real-time collaboration (multiplayer) demo on your local machine, use the dev:multiplayer command. This starts both the Next.js and PartyKit development servers concurrently.

pnpm dev:multiplayer

The drizzle.config.ts file defines the configuration for Drizzle Kit used to manage database migrations and schema synchronization. It uses the postgresql dialect and targets a specific schema file and output directory. To ensure migrations only affect relevant tables, it uses a tablesFilter based on a DATABASE_PREFIX.

import type { Config } from "drizzle-kit";
import { env } from "@/env.js";
import { DATABASE_PREFIX } from "@/lib/constants";

export default {
  schema: "./src/db/schema.ts",
  dialect: "postgresql",
  out: "./drizzle",
  dbCredentials: {
    url: env.DATABASE_URL,
  },
  tablesFilter: [`${DATABASE_PREFIX}_*`],
} satisfies Config;

The getFilterFn<TData>() function returns a FilterFn compatible with @tanstack/react-table. It handles complex filter objects containing an operator, a value, and an optional endValue (used for range filters like isBetween).

Supported operators vary by type, but common ones include:

• Text: contains, notContains, equals, notEquals, startsWith, endsWith, isEmpty, isNotEmpty
• Number: equals, notEquals, lessThan, lessThanOrEqual, greaterThan, greaterThanOrEqual, isBetween, isEmpty, isNotEmpty
• Date: equals, notEquals, before, after, onOrBefore, onOrAfter, isBetween, isEmpty, isNotEmpty
• Select: is, isNot, isAnyOf, isNoneOf, isEmpty, isNotEmpty
• Boolean: isTrue, isFalse

Use getOperatorsForVariant(variant: string) to retrieve a list of available filter operators (label and value pairs) based on the data type variant.

Supported variants:

• number
• date
• select
• multi-select
• checkbox
• Any other string (defaults to text operators)

Use getDefaultOperator(variant: string) to determine the fallback operator for a specific data type variant.

Default mappings:

• number -> equals
• date -> equals
• select or multi-select -> is
• checkbox -> isTrue
• default -> contains