[Table Improvements] Add new customization properties for table format

[juliaroldi]

Add two new properties, firstColumnCustomStyles and headerRowCustomStyles, to the TableMetadaFormat. These properties use the new TableSpecialCellMetadataFormat type and allow customization of the header row and first column styles. Currently, the header row and first column options only apply bold font to cell text, and the header row also changes the background color. With these new properties, each table style can now have distinct header row and first column styles.
We aim to create these new table styles:

Name	Regular cell	Header Row	First Column	Banded Rows	Banded Columns
Table Grid	Borders	No styles	No styles	No styles	No styles
Table Grid Light	Borders	No styles	No styles	No styles	No styles
Plain Table 1	Borders	Bold	Bold	Shading	Shading
Plain Table 2	Borders (top/bottom)	Bold	Border (bottom)	Bold	Borders (top/bottom + left/right)
Plain Table 3	No borders	Bold	Border (bottom)	Bold	Border (right), Shading
Plain Table 4	No borders	Bold	Bold	Shading	Shading
Plain Table 5	No borders	Italic	Border (bottom)	Italic, Align right	Border (right), Shading (conditional)
Grid Table 1 Light	Borders	Bold	Border (bottom, thick)	Bold	No styles
Grid Table 2	Borders (no left/right)	Bold	Border (bottom, thick)	Bold	Shading (except header)
Grid Table 3	Borders	Bold	Border (bottom)	Italic, Align right	Border (right), Shading (conditional)
List Table 1 Light	No borders	Bold	Border (bottom)	Bold	Shading
List Table 2	Borders (top/bottom)	Bold	Bold	Shading	Shading
List Table 3	Borders (outside)	Bold, Inverted text	Bold, Borders (top/bottom)	—	Borders (left/right)

[Copilot]

Pull request overview

This PR adds customization capabilities for table formatting by introducing two new properties (headerRowCustomStyles and firstColumnCustomStyles) to the TableMetadataFormat. These properties use a new TableSpecialCellMetadataFormat type that allows fine-grained control over font styling (weight, italic), text alignment, border colors, and background colors for header rows and first columns.

Changes:

• Added TableSpecialCellMetadataFormat type with optional properties for font styling, borders, alignment, and background color
• Extended TableMetadataFormat with headerRowCustomStyles and firstColumnCustomStyles properties
• Updated table formatting logic to apply custom styles when specified, with fallback to default bold styling
• Modified banding logic to account for header rows and first columns when calculating odd/even rows/columns
• Added comprehensive test coverage for the new custom style properties
• Updated demo with 13 predefined table styles utilizing the new customization options

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
packages/roosterjs-content-model-types/lib/index.ts	Exports the new TableSpecialCellMetadataFormat type
packages/roosterjs-content-model-types/lib/contentModel/format/metadata/TableSpecialCellMetadataFormat.ts	Defines the new type for custom header/first column styling
packages/roosterjs-content-model-types/lib/contentModel/format/metadata/TableMetadataFormat.ts	Adds headerRowCustomStyles and firstColumnCustomStyles properties
packages/roosterjs-content-model-dom/lib/modelApi/metadata/updateTableMetadata.ts	Updates metadata validation to include the new custom style properties
packages/roosterjs-content-model-dom/lib/modelApi/editing/applyTableFormat.ts	Implements logic to apply custom styles to header rows and first columns, updates banding calculation
packages/roosterjs-content-model-dom/test/modelApi/metadata/updateTableMetadataTest.ts	Adds tests for metadata handling of new properties
packages/roosterjs-content-model-dom/test/modelApi/editing/applyTableFormatTest.ts	Adds tests for applying and removing custom styles, updates banding test expectations
demo/scripts/controlsV2/demoButtons/formatTableButton.ts	Defines 13 table styles using the new customization properties

Comments suppressed due to low confidence (1)

packages/roosterjs-content-model-dom/lib/modelApi/editing/applyTableFormat.ts:297

• When hasFirstColumn is false or customStyles is undefined, only fontWeight is cleaned up from segments (lines 295-296), but italic is not removed. This means if italic was previously set by firstColumnCustomStyles, it will persist even after the first column styling is disabled. Consider adding cleanup for italic and other segment properties similar to how fontWeight is handled.

                                } else if (
                                    cellSegment.format.fontWeight == 'bold' &&
                                    cell.format.fontWeight == 'bold'
                                ) {
                                    delete cellSegment.format.fontWeight;
                                    delete cell.format.fontWeight;
                                }

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 8 out of 8 changed files in this pull request and generated 6 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 8 out of 8 changed files in this pull request and generated 6 comments.

Comments suppressed due to low confidence (1)

packages/roosterjs-content-model-dom/lib/modelApi/editing/applyTableFormat.ts:322

• When hasFirstColumn is turned off, the cleanup logic only deletes fontWeight (and only when it equals 'bold'). Any first-column custom styles applied earlier (e.g. textAlign on the cell format and italic on segments) are not reverted, so toggling the feature off can leave stale formatting in the model. Consider removing/resetting the other properties you set when hasFirstColumn is true (e.g. delete textAlign/italic if they match the applied values, or apply a symmetric undo path).

                                if (format.hasFirstColumn) {
                                    setStyleIfDefined(
                                        cellSegment.format,
                                        'fontWeight',
                                        customStyles?.fontWeight ?? 'bold'
                                    );
                                    setStyleIfDefined(
                                        cell.format,
                                        'textAlign',
                                        customStyles?.textAlign
                                    );
                                    setStyleIfDefined(
                                        cell.format,
                                        'fontWeight',
                                        customStyles?.fontWeight ?? 'bold'
                                    );
                                    setStyleIfDefined(
                                        cellSegment.format,
                                        'italic',
                                        customStyles?.italic
                                    );
                                } else if (
                                    cellSegment.format.fontWeight == 'bold' &&
                                    cell.format.fontWeight == 'bold'
                                ) {
                                    delete cellSegment.format.fontWeight;
                                    delete cell.format.fontWeight;
                                }

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.