Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Enhance your career with this limited time 50% discount on Fabric and Power BI exams. Ends September 15. Request your voucher.

Reply
max14
Frequent Visitor

Power BI Custom visual - Table

I am trying to create custom Table visual. While adding the conditional formating option I am getting error. How do I rectify it. Is there sample code available for custom Table visual. I checked the documentation but not getting much info.

 

TS2322: Type '{ slices: undefined[]; }' is not assignable to type 'FormattingGroup | FormattingGroupPlaceholder'.
Type '{ slices: undefined[]; }' is missing the following properties from type 'FormattingGroup': uid, displayName

 

 

public getFormattingModel(): powerbi.visuals.FormattingModel {
        const formattingModel: powerbi.visuals.FormattingModel = {
            cards: []
        };
    
        const formattingCard: powerbi.visuals.FormattingCard = {
            displayName: "Cell Elements",
            uid: "cellElementsCard",
            description: "Customize the cell elements",
            groups: [
                {
                    slices: []
                }
            ]
        };
    
        const tableData = this.dataView.table.rows;
        const columns = this.dataView.table.columns;
    
        tableData.forEach((row, rowIndex) => {
            row.forEach((cell, cellIndex) => {
                const columnName = columns[cellIndex].displayName;
                const colorSetting = this.tableSettings.cellElements.backgroundColor;
    
                const backgroundColorSlice: powerbi.visuals.FormattingSlice = {
                    displayName: `${columnName} Background Color`,
                    uid: `backgroundColor_${rowIndex}_${cellIndex}`,
                    control: {
                        type: powerbi.visuals.FormattingComponent.ColorPicker,
                        properties: {
                            descriptor: {
                                objectName: "cellElements",
                                propertyName: "backgroundColor",
                                selector: dataViewWildcard.createDataViewWildcardSelector(dataViewWildcard.DataViewWildcardMatchingOption.InstancesAndTotals), // Corrected option
                                altConstantValueSelector: null,
                                instanceKind: powerbi.VisualEnumerationInstanceKinds.ConstantOrRule
                            },
                            value: { value: colorSetting }
                        }
                    }
                };
    
                const fontColorSlice: powerbi.visuals.FormattingSlice = {
                    displayName: `${columnName} Font Color`,
                    uid: `fontColor_${rowIndex}_${cellIndex}`,
                    control: {
                        type: powerbi.visuals.FormattingComponent.ColorPicker,
                        properties: {
                            descriptor: {
                                objectName: "cellElements",
                                propertyName: "fontColor",
                                selector: dataViewWildcard.createDataViewWildcardSelector(dataViewWildcard.DataViewWildcardMatchingOption.InstancesAndTotals), // Corrected option
                                altConstantValueSelector: null,
                                instanceKind: powerbi.VisualEnumerationInstanceKinds.ConstantOrRule
                            },
                            value: { value: this.tableSettings.cellElements.fontColor }
                        }
                    }
                };
    
                formattingCard.groups[0].slices.push(backgroundColorSlice, fontColorSlice);
            });
        });
    
        formattingModel.cards.push(formattingCard);
        return formattingModel;
    }

 

 

0 REPLIES 0

Helpful resources

Announcements
August Power BI Update Carousel

Power BI Monthly Update - August 2025

Check out the August 2025 Power BI update to learn about new features.

August 2025 community update carousel

Fabric Community Update - August 2025

Find out what's new and trending in the Fabric community.

Top Solution Authors