Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/duongdev/notion-table
Notion table, sorts, and advanced filters clone with Next.js & TailwindCSS
https://github.com/duongdev/notion-table
nextjs notion react-table tailwindcss
Last synced: 3 months ago
JSON representation
Notion table, sorts, and advanced filters clone with Next.js & TailwindCSS
- Host: GitHub
- URL: https://github.com/duongdev/notion-table
- Owner: duongdev
- Created: 2024-08-19T09:46:17.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-08-21T17:10:11.000Z (4 months ago)
- Last Synced: 2024-09-29T19:01:55.251Z (3 months ago)
- Topics: nextjs, notion, react-table, tailwindcss
- Language: TypeScript
- Homepage: https://notion-table.duong.work
- Size: 440 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 👋
This project is for research and educational purpose. The project is a web application that displays a table view of a Notion database and allows users to sort and filter the database using the Notion API.
## Tech stack 🛠
- [Next.js](https://nextjs.org/)
- [Tailwind CSS](https://tailwindcss.com/)
- [shadcn/ui](https://ui.shadcn.com/)
- [Notion API](https://developers.notion.com/)
- [React Table](https://react-table.tanstack.com/)
- [Zustand](https://zustand.surge.sh/)
- [TypeScript](https://www.typescriptlang.org/)
- [Docker](https://www.docker.com/)
## Quick start 🚀
1. **Clone the repository.**
```shell
git clone
```
2. **Configure the environment variables.**
Create a `.env` file in the root of the project and add the following environment variables:
```shell
NOTION_SECRET=
NOTION_DB_ID=
NEXT_PUBLIC_MAX_FILTER_DEPTH=2
NEXT_PUBLIC_ENABLE_NEGATION=true
```
3. **Install dependencies.**
```shell
npm install
```
4. **Start the development server.**
```shell
npm run dev
```
5. **Open the source code and start editing!**
Your site is now running at `http://localhost:3000`!
## Running with Docker 🐳
1. **Update `next.config.mjs` file.**
```diff
/** @type {import('next').NextConfig} */
const nextConfig = {
transpilePackages: ["geist"],
+ output: "standalone",
};
export default nextConfig;
```
2. **Build the Docker image.**
```shell
docker build -t notion-table-view .
```
3. **Run the Docker container.**
```shell
docker run -p 3000:3000 notion-table-view
```
4. **Open the source code and start editing!**
Your site is now running at `http://localhost:3000`!
## Key features ⭐
- [x] Build a table view UI for Notion databases
- [x] Implement a basic table view given a Notion database as input.
- [x] Support sorting.
- [x] Support rearrangement and resizing of columns - expected behavior:
- [x] Click and hold the column headings to drag them left or right.
- [x] Resize columns by hovering over their edges, and dragging right or left.
- [x] Build a Notion filter UI for supporting database filters.
- [x] Support the property types `checkbox , date , multi_select , number , rich_text ,
select , timestamp , status`.
- [x] Support Compound filters with filter groups.
- [x] The Notion API doc notes that it only supports two levels of nesting on compound filter conditions. Implement the filters such that the restriction on the levels of nesting is configurable e.g. could be increased to 3, 4, or more.
- [ ] Implement unit tests for the Compound filters
- [x] Implement the NOT operator for compound filter conditions. Support compound filter conditions that contain only filter operators where the Notion API offers the logical negation e.g. `!( )` is `is_not_empty` , `!( less_than )` is `greater_than_or_equal_to`
- [x] For the filter conditions where Notion does not offer the logical negation, implement validation logic that prompts the user that the NOT operator is unsupported with the given compound filter conditions.
- [x] For example: `!(( datePropertyX is after “2023-01-01” AND textPropertyY ends with “.com”) OR textPropertyZ starts with “www.”)` should indicate “Unsupported conditions for `NOT: ends with , starts with`
- [ ] Include unit test cases for the NOT operator logic