How to change Frozen rows and columns Background color

Tags: #<Tag:0x00007efc728f2198> #<Tag:0x00007efc728f2058>
#1

Hi all im new to Handsontable this is my code ,


<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>HTML with Handsontable</title>

    <!-- Include Handsontable CSS -->

    <link rel="stylesheet" href="handsontable.full.min.css">

    <!-- Include Handsontable JavaScript -->

    <script src="handsontable.full.min.js"></script>

    <label for="freezeRows">Freeze Rows:</label>

    <input type="number" id="freezeRows" value="0">

    <label for="freezeCols">Freeze Cols:</label>

    <input type="number" id="freezeCols" value="0">

</head>

<body>

    <div id="hot-container"></div>

    <script>

        const data = new Array(100) // number of rows

            .fill()

            .map((_, row) => new Array(50) // number of columns

                .fill()

                .map((_, column) => `${row}, ${column}`)

            );

        var container = document.getElementById('hot-container');

        var hot = new Handsontable(container, {

            data: data,

            colHeaders: true,

            manualColumnResize: true,

            rowHeaders: true,

            manualRowResize: true,

            fixedColumnsStart: 2,

            fixedRowsTop: 2,

        });

        freezeRows.addEventListener('change', function () {

            console.log(freezeRows.value)

            var numFrozenRows = parseInt(freezeRows.value, 10);

            hot.updateSettings({ fixedRowsTop: numFrozenRows });

        });

        freezeCols.addEventListener('change', function () {

            console.log(freezeCols.value)

            var numFrozenCols = parseInt(freezeCols.value, 10);

            hot.updateSettings({ fixedColumnsStart: numFrozenCols });

        });

    </script>

</body>

</html>

whenever the user changes the number of rows or columns to be frozen i want to change their background color, is it possible ? thank you!

#2

Hi @janaselmourad

Thank you for contacting us. You can use afterColumnFreeze hook which is fired after freezing action, and then use setCellMeta method to assign a custom CSS class that will handle changing the background color for the newly frozen column. In the setCellMeta method it would be then “className” for key and name of the CSS class for the value.

#3