How to Customize and Replace the 'Select All' Corner Triangle in SpreadJS

In SpreadJS, the small triangle located at the intersection of the row and column headers commonly known as the “Select All” corner triangle provides a quick way to select the entire worksheet. By default, this triangle appears in a grey color and changes to green when selected.

Depending on your application’s UI requirements, you may want to either change the appearance of this triangle or replace it entirely with a custom icon. SpreadJS supports both approaches, allowing developers to tailor the corner area to match their application’s design and branding.

Customizing the Appearance Using CSS

SpreadJS exposes dedicated CSS classes that control the visual states of the corner triangle. These classes allow you to modify its color, border, and hover behavior without changing any JavaScript logic.

The following CSS classes control the triangle’s appearance:

• .gc-corner-triangle-normal - default state
• .gc-corner-triangle-hover - when the user hovers over it
• .gc-corner-triangle-selected - when the triangle is clicked or active

By overriding these selectors in your stylesheet, you can fully control how the triangle is rendered.

Example: Change the Default Triangle Color

The example below changes the normal state of the corner triangle to a red background with a yellow border:

.gc-corner-triangle-normal {
    background-image: -webkit-linear-gradient(top, red, red);
    background-color: red !important;
    background-size: 30% !important;
    border-color: yellow !important;
}

.gc-corner-triangle-hover {
    /* Optional: add custom hover styling */
}

.gc-corner-triangle-selected {
    /* Optional: add custom selected-state styling */
}

This approach is ideal when you want to keep the default behavior while aligning the visual style with your application’s theme.

Replacing the Corner Triangle with a Custom Icon

If you need more advanced customization such as replacing the triangle with a completely different icon, the corner area can be fully customized through code.

The corner cell is implemented as a special cell type in SpreadJS. By overriding the paint method of the GC.Spread.Sheets.CellTypes.Corner prototype, you gain full control over how the corner cell is rendered using the HTML5 Canvas API.

This allows you to draw custom shapes, icons, or even images in place of the default triangle.

Example: Drawing a Custom Icon in the Corner Cell

The following example replaces the default triangle by drawing a custom sun icon in the center of the corner cell:

window.onload = function () {
    GC.Spread.Sheets.CellTypes.Corner.prototype.paint = function (
        ctx, value, x, y, w, h, style, options
    ) {
        if (!ctx) {
            return;
        }

        ctx.save();
        ctx.rect(x, y, w, h);
        ctx.clip();

        // Background
        ctx.fillStyle = "#ffffff";
        ctx.fillRect(x, y, w, h);

        // Right border
        var rightStrokeStyle = ctx.createLinearGradient(x + w, y + 1, x + w, y + h - 2);
        rightStrokeStyle.addColorStop(0, 'rgb(239, 239, 239)');
        rightStrokeStyle.addColorStop(1, 'rgb(213, 222, 213)');
        ctx.strokeStyle = rightStrokeStyle;
        ctx.beginPath();
        ctx.moveTo(x + w - 0.5, y);
        ctx.lineTo(x + w - 0.5, y + h);
        ctx.stroke();

        // Bottom border
        var bottomStrokeStyle = ctx.createLinearGradient(x, y, x + w - 2, y);
        bottomStrokeStyle.addColorStop(0, 'rgb(239, 239, 239)');
        bottomStrokeStyle.addColorStop(1, 'rgb(213, 222, 213)');
        ctx.strokeStyle = bottomStrokeStyle;
        ctx.beginPath();
        ctx.moveTo(x, y + h - 0.5);
        ctx.lineTo(x + w, y + h - 0.5);
        ctx.stroke();

        // Draw custom icon (sun)
        ctx.fillStyle = "orange";
        ctx.strokeStyle = "orange";
        ctx.lineWidth = 2;

        var centerX = x + w / 2;
        var centerY = y + h / 2;
        var radius = Math.min(w, h) * 0.15;
        var rayLength = radius * 1.5;

        // Sun rays
        for (var i = 0; i < 8; i++) {
            var angle = i * Math.PI / 4;
            ctx.beginPath();
            ctx.moveTo(
                centerX + radius * Math.cos(angle),
                centerY + radius * Math.sin(angle)
            );
            ctx.lineTo(
                centerX + rayLength * Math.cos(angle),
                centerY + rayLength * Math.sin(angle)
            );
            ctx.stroke();
        }

        // Sun body
        ctx.beginPath();
        ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
        ctx.fill();

        ctx.restore();
    };

    var spread = new GC.Spread.Sheets.Workbook('ss');
    var sheet = spread.getActiveSheet();
};

By combining CSS-based styling with custom rendering, SpreadJS offers flexible options for tailoring the “Select All” corner triangle from subtle visual tweaks to complete replacement ensuring it integrates seamlessly into your application’s user experience.