currently working ag-grid library , react render data in table. here simple example of i'm trying do:
soccer player player1 player2 player3 in above column want change color of column based on number of goals player has scored. in ag-grid can't find way this. ag-grid allows define cell styling rules, far can tell rules dependent on value in cell. in above example player name cell might highlighted green if have scored 10 or fewer goals, blue if have scored 20 or fewer goals, etc.
does have ideas on how this, or recommend library might have functionality?
the ag-grids document on cell styling says can define cellstyle in column definition. either can define style object manually or can use function return object of css styles.
for case can use function access row nodes data , compute styles based on that. in sort want this:
var columndef = [{ headername: "player id", field: "id" }, { headername: "player name", field: "playername", cellclass: "playernameclass", // defining cell style using function cellstyle: function(params) { /* params give assess row node can node data. can data column , style column based on that. */ var goals = params.node.data.goalsscored; console.log({ "params": params, "data": params.data, "goals": goals }); // logic style components if (goals === 0) { background = "#b70000" } else if (goals === 1 || goals === 2) { background = "#ff8400" } else if (goals === 3 || goals === 4) { background = "#fff700" } else if (goals === 5 || goals === 6) { background = "#ceff00" } else if (goals === 7) { background = "#05cc00" } else { background = "#fff" } // return style object return { background: background }; } }, { headername: "goals scored", field: "goalsscored" } ];check out pen detailed example: http://codepen.io/skmsoumya/pen/bqyyqj
Comments
Post a Comment