ipydatagrid allows for an incredible level of style customisation!¶Styling can be applied on three layers:
The default renderers which you can apply to the DataGrid are default_renderer, header_renderer and corner_renderer.
The grid style property can be defined via grid_style. Overall grid styles take medium priority and will override default renderer styles!
The available properties are listed below:
void_color: color of the area where the grid is not painted on the canvasbackground_color: background color for all body cellsrow_background_color: row-wise background color (takes a Vega Expression)column_background_color: column-wise background color (takes a Vega Expression)grid_line_color: color of both vertical and horizontal grid linesvertical_grid_line_color: vertical grid line colorhorizontal_grid_line_color: horizontal grid line colorheader_background_color: background color for all non-body cells (index and columns)header_grid_line_color: grid line color for all non-body cells (index and columns)header_vertical_grid_line_color: vertical grid line color for all non-body cellsheader_horizontal_grid_line_color: horizontal grid line color for all non-body cellsselection_fill_color: fill color of selected area selection_border_color : border color of selected areaheader_selection_fill_color: fill color of headers intersecting with selected area at column or rowheader_selection_border_color: border color of headers intersecting with selected area at column or rowcursor_fill_color: fill color of cursorcursor_border_color: border color of cursorscroll_shadow : Dict of color parameters for scroll shadow (vertical and horizontal). Takes three parameters:size : size of shadow in pixelscolor1 : gradient color 1color2 : gradient color 2color3 : gradient color 3Column specific renderers can be specified via the renderers property which takes a key corresponding to the column name, and TextRenderer or BarRenderer as value. Column-specific renderers take the highest priority and will override grid_style properties.
import pandas as pd
import numpy as np
import ipydatagrid as grid
np.random.seed(104)
rang = 10
df = pd.DataFrame(
data=[np.random.randint(0, 11, rang) for i in range(rang)],
index=[f"Row {i}" for i in range(rang)],
columns=[f"Col {i}" for i in range(rang)],
)
g = grid.DataGrid(
df, layout={"height": "300px", "width": "800px"}, selection_mode="cell"
)
g
Using only top-level grid styling without custom renderers
monokai = {
"background_color": "#2c292d",
"grid_line_color": "#a698eb7a",
"header_background_color": "#2c292d9a",
"header_grid_line_color": "#fc98675a",
"selection_fill_color": "#78dce81a",
"selection_border_color": "#ffd866",
"header_selection_fill_color": "#ab9df24a",
"header_selection_border_color": "lawngreen",
"cursor_fill_color": "#78dce87a",
"cursor_border_color": "#ff6188",
}
g.grid_style = monokai
cotton_candy = {
"background_color": "rgb(255, 245, 251)",
"header_background_color": "rgb(207, 212, 252, 1)",
"header_grid_line_color": "rgb(0, 247, 181, 0.9)",
"vertical_grid_line_color": "rgb(0, 247, 181, 0.3)",
"horizontal_grid_line_color": "rgb(0, 247, 181, 0.3)",
"selection_fill_color": "rgb(212, 245, 255, 0.3)",
"selection_border_color": "rgb(78, 174, 212)",
"header_selection_fill_color": "rgb(212, 255, 239, 0.3)",
"header_selection_border_color": "rgb(252, 3, 115)",
"cursor_fill_color": "rgb(186, 32, 186, 0.2)",
"cursor_border_color": "rgb(191, 191, 78)",
}
g.grid_style = cotton_candy
Combining custom renderers and top level grid styling
watermelon = {
"column_background_color": grid.VegaExpr(
"cell % 2 === 0 ? 'rgb(255, 130, 145, 0.5)' : 'rgb(255, 130, 145, 0.2)'"
),
"header_vertical_grid_line_color": "rgb(0, 140, 86, 0.8)",
"header_horizontal_grid_line_color": "rgb(0, 140, 86, 0.4)",
"vertical_grid_line_color": "rgb(176, 176, 176)",
"horizontal_grid_line_color": "rgb(0, 247, 181, 0)",
"selection_fill_color": "rgb(235, 223, 7, 0.3)",
"selection_border_color": "rgb(201, 219, 7)",
"header_selection_fill_color": "rgb(235, 223, 7, 0.4)",
"header_selection_border_color": "rgb(252, 3, 115)",
"cursor_fill_color": "rgb(235, 7, 113, 0.4)",
"cursor_border_color": "rgb(6, 191, 58, 0.9)",
}
g.grid_style = watermelon
g.corner_renderer = grid.TextRenderer(
background_color="rgb(250, 242, 130)", text_color="black"
)
g.header_renderer = grid.TextRenderer(
background_color=grid.VegaExpr(
"cell.column % 2 === 0 ? 'rgb(34, 110, 29)': 'rgb(24, 150, 19)'"
),
text_color="white",
)
g.renderers = {
"key": grid.TextRenderer(
background_color=grid.VegaExpr(
"cell.row % 2 === 0 ? 'rgb(21, 116, 163)': 'rgb(21, 116, 163)'"
),
text_color="white",
)
}