Skip to content

table-tree

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

table-tree

README.md

@fluid-example/table-tree

Table example is a more advanced Fluid Framework app that demonstrates real-time collaboration on a structured table. It uses React for rendering and showcases dynamic row and column management, type-specific cell rendering (e.g., checkbox, date, text), and drag-and-drop reordering.

Getting Started

You can run this example using the following steps:

  1. Enable corepack by running corepack enable.
  2. Run pnpm install and pnpm run build:fast --nolint from the FluidFramework root directory.
    • For an even faster build, you can add the package name to the build command, like this: pnpm run build:fast --nolint @fluid-example/table-tree
  3. Run pnpm start from this directory and open http://localhost:8080 in a web browser to see the app running.
  4. If you want to run the app against SharePoint, follow the instructions in webpack-fluid-loader to get auth credentials. Then run pnpm start:spo or pnpm start:spo-df and open http://localhost:8080 like above.

Table Fluid objects

There is a single Fluid object that make up the Table application:

TableDataObject

A TableDataObject is the top level Fluid object. It can create, remove, move rows and columns into the table.

The views

TableView

The default view is a TableView mapping to a TableDataObject. It uses the Fluent UI library to display its contents, and imports the TableRowView to get the contents of the table. It also provides buttons to add a new row.

TableRowView

The TableRowView uses the Fluent UI library to display its contents, and gets refers to the table's column ids to get the correct cell data. It renders different types of cells depending on the column type, and also provides a button to delete the row.

TableHeaderView

The TableHeaderView uses the Fluent UI library to display its contents. It provides the header of the table.

The container code

The container code includes a request handler that provides views to the data stored within. For a default (empty) request, it provides a TodoView in response. The container code's request handler can also provide back a TodoItemView directly when a direct link is used.

Contribution Guidelines

There are many ways to contribute to Fluid.

Detailed instructions for working in the repo can be found in the Wiki.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.

This project may contain Microsoft trademarks or logos for Microsoft projects, products, or services. Use of these trademarks or logos must follow Microsoft’s Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship.

Help

Not finding what you're looking for in this README? Check out fluidframework.com.

Still not finding what you're looking for? Please file an issue.

Thank you!

Trademark

This project may contain Microsoft trademarks or logos for Microsoft projects, products, or services.

Use of these trademarks or logos must follow Microsoft's Trademark & Brand Guidelines.

Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship.