[GH-ISSUE #1727] [FR] AppFlowy Grid UI #9073

New issue

Closed

opened 2026-03-24 21:09:05 +00:00 by mirror · 1 comment

mirror commented

2026-03-24 21:09:05 +00:00

Owner

Originally created by @appflowy on GitHub (Jan 19, 2023).
Original GitHub issue: https://github.com/AppFlowy-IO/AppFlowy/issues/1727

Originally assigned to: @mikiastilahun on GitHub.

Description

Implement the Grid of AppFlowy
A Grid type is a simple representation of items placed in columns and rows. It is not a spreadsheet.

A Grid has multiple fields and rows.
A Field represents the configuration of a column.
A Row represents a group of related cells.
A Cell is one individual cell in a grid.

In addition, these have been implemented in Flutter, you can refer to the implementation inside to organize your code or you can download the release AppFlowy to experience the interaction.

Prerequisites:

Follow this guide to see AppFlowy design principle and set up your development environment

Required

Use React-TS to build the UI and follow the react design principles
Lint: https://github.com/prettier/prettier - https://prettier.io/docs/en/editors.html
i18n: https://github.com/i18next/react-i18next
State manager: https://github.com/reduxjs/react-redux
unit test: https://github.com/testing-library/react-testing-library
UI should support the Theme
Follow the DDD design principle

Resources :

Impact

None

Additional Context

No response

Originally created by @appflowy on GitHub (Jan 19, 2023). Original GitHub issue: https://github.com/AppFlowy-IO/AppFlowy/issues/1727 Originally assigned to: @mikiastilahun on GitHub. ### Description Implement the Grid of AppFlowy A Grid type is a simple representation of items placed in columns and rows. It is not a spreadsheet. * A Grid has multiple fields and rows. * A Field represents the configuration of a column. * A Row represents a group of related cells. * A Cell is one individual cell in a grid. <img width="704" alt="image" src="https://user-images.githubusercontent.com/86001920/213375236-b531f7dc-f7d8-4e94-a912-92ca775e9393.png"> In addition, these have been implemented in Flutter, you can refer to the [implementation](https://github.com/AppFlowy-IO/AppFlowy/tree/main/frontend/app_flowy/lib/plugins/grid) inside to organize your code or you can download the release [AppFlowy](https://github.com/AppFlowy-IO/AppFlowy/releases) to experience the interaction. Prerequisites: Follow this [guide](https://www.notion.so/appflowy/Development-6eb9015951834853b394fc360c07a673) to see AppFlowy design principle and set up your development environment # Required 1. Use **React-TS** to build the UI and follow the [react design principles](https://reactjs.org/docs/design-principles.html) 2. Lint: https://github.com/prettier/prettier - [https://prettier.io/docs/en/editors.html](https://prettier.io/docs/en/editors.html) 3. i18n: https://github.com/i18next/react-i18next 4. State manager: https://github.com/reduxjs/react-redux 5. unit test: https://github.com/testing-library/react-testing-library 6. UI should support the Theme 7. Follow the [DDD](https://www.notion.so/AppFlowy-React-c858a3f1bde04f88b75686192f6c8e6e) design principle Resources : 1. [AppFlowy Figma](https://www.figma.com/file/X1R9i5HAFtJSNIKOPPW7yK/AppFlowy-%5BUI%5D%5BMaster%5D?node-id=0%3A1&t=CR4OidJ8GnzNuUrD-1) 2. [AppFlowy release version](https://github.com/AppFlowy-IO/AppFlowy/releases) 3. [About AppFlowy Tauri](https://www.notion.so/About-749332384d1b45cd9ec67c61dda82ffe) ### Impact None ### Additional Context _No response_