# Threaded Comments Panel

## Content

The **Threaded Comment Panel** is a built-in component of SpreadJS used to display, manage, and interact with all **threaded comments** in the active worksheet.
It provides an intuitive interface for users to review, reply to, and filter conversation threads directly within the panel, improving collaboration efficiency in spreadsheet-based environments.
The panel is fully synchronized with the workbook’s threaded comment system and updates dynamically as comments are added, edited, or deleted.
![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image.b31bde.png?width=1000)

## Supported Panel Actions

List all available actions grouped by functional area.

| **Module** | **Operation (User Action)** | **Illustration** |
| ------ | ----------------------- | ------------ |
| @rows=5:Comment Manager | View all threaded comments available on the current sheet. | ![viewThread.gif](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/viewThread.79d8fa.gif?width=200) |
| Retrieve the total number of threaded comments in the current sheet. | ![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image.473706.png?width=200) |
| Filter threaded comments based on defined conditions. | ![filter.gif](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/filter.c08343.gif?width=200) |
| Create a new threaded comment for the currently selected cell. | ![createThread.gif](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/createThread.50e0a2.gif?width=200) |
| Delete a specific threaded comment. | ![deleteThread.gif](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/deleteThread.87648f.gif?width=200) |
| @rows=3:Thread | Expand a thread to view all comments (replies) within it. | ![expandThread.gif](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/expandThread.6041bc.gif?width=200) |
| Mark the thread as **Resolved**. | ![resolved.gif](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/resolved.b638cd.gif?width=200) |
| Reopen a resolved thread (change status back to active). | ![reopen.gif](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/reopen.3955bc.gif?width=200) |
| @rows=3:Comment | Add a new comment inside an existing thread. | ![addComment.gif](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/addComment.f49315.gif?width=200) |
| Delete an existing comment from the thread. | ![deleteComment.gif](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/deleteComment.5f9beb.gif?width=200) |
| Edit an existing comment (only applicable if the current user is the original author). | ![editComment.gif](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/editComment.7062b2.gif?width=200) |

**Filtering Comments**

![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image.60e2fb.png?width=150)
Three filtering criteria are currently supported:

* Whether the current user is mentioned in a thread (**@mentions Me**)
* Threaded comment status — **Active Only** or **Resolved Only**

The **Reset All** option allows you to quickly clear all applied filters.

## Keyboard Shortcuts for Navigating Comments

When a threaded comment is selected in the panel, the following shortcuts allow you to move between comment threads efficiently:

| **Key** | **Function** |
| --- | -------- |
| Arrow Up | Navigate to the previous threaded comment |
| Arrow Down | Navigate to the next threaded comment |

## Integrate the Panel Using the API

Use the `ThreadedCommentPanel` class to add the built‑in threaded comments side panel to your UI.
Once attached to a workbook, the panel automatically lists all threaded comments.

```javascript
let workbook = new GC.Spread.Sheets.Workbook("spread-host");
let threadedCommentPanel = new GC.Spread.Sheets.ThreadedComments.ThreadedCommentPanel("threaded-comment-panel-host");

threadedCommentPanel.attach(workbook);
```