Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://docs.dhtmlx.com/suite/grid/api/gridcolumn_properties/gridcolumn_mark_property/ below:

Website Navigation

• Previous

  id

• Next

  maxWidth

JavaScript Grid column - mark Config

Optional. Returns a template for marking a cell(s) or applies the desired CSS classes to cells with minimal|maximal values in a column

mark?:
    { min?: string, max?: string } | 
    (cell, columnCells: [], row?: IRow, column?: ICol) => string;

The mark property can be either an object or a function:

• as an object contains min and max properties, to apply desired CSS classes to cells with minimal|maximal values in a column
• as a function returns a template for marking a cell(s) and takes several parameters:
  • cell - (required) the value of a cell
  • columnCells - (required) an array of all cell values in the specified column
  • row - (optional) an object with all cells in a row
  • column - (optional) an object with the configuration of a column (see the columns config)

<style>
    .max_cell {
        background: #f44336;
        color: #FFF;
    }

    .min_cell {
        background: #4CAF50;
        color: #FFF
    }
</style>

<script>
    const grid = new dhx.Grid("grid_container", {
        columns: [
            {
                id: "population", header: [{ text: "Population" }],
                mark: {
                    min: "min_cell",
                    max: "max_cell"
                }
            },
            // more columns configuration objects
        ],
        // more options
    });
</script>

Related article: Adding custom marks to cells

Related sample: Grid. Mark cells

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4