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

July 7 - July 17 | Round 2 of the Power BI Dataviz World Championships. Don't miss your chance! Learn more

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
FabCon and SQLCon Barcelona 2026

FabCon & SQLCon – Barcelona 2026

Join us in Barcelona for FabCon and SQLCon, the Fabric, Power BI, SQL, and AI community event. Save €200 with code FABCMTY200.

60 days of Data Days Carousel

Data Days 2026

Join Data Days 2026: 60 days of free live/on-demand sessions, challenges, study groups, and certification opportunities.

Power BI DataViz World Championships carousel

Power BI DataViz World Championships - June 2026

A new Power BI DataViz World Championship is coming this June! Don't miss out on submitting your entry.

Top Solution Authors