{
"cells": [
{
"cell_type": "markdown",
"id": "initial-museum",
"metadata": {},
"source": [
"### `ipydatagrid` allows for an incredible level of style customisation!\n",
"\n",
"Styling can be applied on three layers:\n",
"\n",
"1. Default renderers: header (columns), corner (top left corner) and default (body)\n",
"2. Overall grid style: a set of attributes that can be applied directly to the grid *without* the need for a specific renderer\n",
"3. Column-specific renderers\n",
"\n",
"The default renderers which you can apply to the DataGrid are `default_renderer`, `header_renderer` and `corner_renderer`.\n",
"\n",
"The grid style property can be defined via `grid_style`. **Overall grid styles take medium priority and will override default renderer styles!** \n",
"The available properties are listed below:\n",
"\n",
"1. `void_color`: color of the area where the grid is not painted on the canvas\n",
"2. `background_color`: background color for all body cells\n",
"3. `row_background_color`: row-wise background color (takes a Vega Expression)\n",
"4. `column_background_color`: column-wise background color (takes a Vega Expression)\n",
"5. `grid_line_color`: color of both vertical and horizontal grid lines\n",
"6. `vertical_grid_line_color`: vertical grid line color\n",
"7. `horizontal_grid_line_color`: horizontal grid line color\n",
"8. `header_background_color`: background color for all non-body cells (index and columns)\n",
"9. `header_grid_line_color`: grid line color for all non-body cells (index and columns)\n",
"10. `header_vertical_grid_line_color`: vertical grid line color for all non-body cells\n",
"11. `header_horizontal_grid_line_color`: horizontal grid line color for all non-body cells\n",
"12. `selection_fill_color`: fill color of selected area selection_border_color : border color of selected area\n",
"13. `header_selection_fill_color`: fill color of headers intersecting with selected area at column or row\n",
"14. `header_selection_border_color`: border color of headers intersecting with selected area at column or row\n",
"15. `cursor_fill_color`: fill color of cursor\n",
"16. `cursor_border_color`: border color of cursor\n",
"17. `scroll_shadow` : Dict of color parameters for scroll shadow (vertical and horizontal). Takes three parameters:\n",
" * `size` : size of shadow in pixels\n",
" * `color1` : gradient color 1\n",
" * `color2` : gradient color 2\n",
" * `color3` : gradient color 3\n",
"\n",
"\n",
"Column 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.**"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "applicable-groove",
"metadata": {},
"outputs": [],
"source": [
"import pandas as pd\n",
"import numpy as np\n",
"import ipydatagrid as grid\n",
"\n",
"np.random.seed(104)\n",
"rang = 10\n",
"df = pd.DataFrame(\n",
" data=[np.random.randint(0, 11, rang) for i in range(rang)],\n",
" index=[f\"Row {i}\" for i in range(rang)],\n",
" columns=[f\"Col {i}\" for i in range(rang)],\n",
")\n",
"\n",
"g = grid.DataGrid(\n",
" df, layout={\"height\": \"300px\", \"width\": \"800px\"}, selection_mode=\"cell\"\n",
")\n",
"g"
]
},
{
"cell_type": "markdown",
"id": "third-import",
"metadata": {},
"source": [
"### Monokai-based theme for dark backgrounds\n",
"Using only top-level grid styling without custom renderers"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "related-candle",
"metadata": {},
"outputs": [],
"source": [
"monokai = {\n",
" \"background_color\": \"#2c292d\",\n",
" \"grid_line_color\": \"#a698eb7a\",\n",
" \"header_background_color\": \"#2c292d9a\",\n",
" \"header_grid_line_color\": \"#fc98675a\",\n",
" \"selection_fill_color\": \"#78dce81a\",\n",
" \"selection_border_color\": \"#ffd866\",\n",
" \"header_selection_fill_color\": \"#ab9df24a\",\n",
" \"header_selection_border_color\": \"lawngreen\",\n",
" \"cursor_fill_color\": \"#78dce87a\",\n",
" \"cursor_border_color\": \"#ff6188\",\n",
"}\n",
"\n",
"g.grid_style = monokai"
]
},
{
"cell_type": "markdown",
"id": "satisfactory-castle",
"metadata": {},
"source": [
"### Cotton candy theme for light backgrounds"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "smoking-prince",
"metadata": {},
"outputs": [],
"source": [
"cotton_candy = {\n",
" \"background_color\": \"rgb(255, 245, 251)\",\n",
" \"header_background_color\": \"rgb(207, 212, 252, 1)\",\n",
" \"header_grid_line_color\": \"rgb(0, 247, 181, 0.9)\",\n",
" \"vertical_grid_line_color\": \"rgb(0, 247, 181, 0.3)\",\n",
" \"horizontal_grid_line_color\": \"rgb(0, 247, 181, 0.3)\",\n",
" \"selection_fill_color\": \"rgb(212, 245, 255, 0.3)\",\n",
" \"selection_border_color\": \"rgb(78, 174, 212)\",\n",
" \"header_selection_fill_color\": \"rgb(212, 255, 239, 0.3)\",\n",
" \"header_selection_border_color\": \"rgb(252, 3, 115)\",\n",
" \"cursor_fill_color\": \"rgb(186, 32, 186, 0.2)\",\n",
" \"cursor_border_color\": \"rgb(191, 191, 78)\",\n",
"}\n",
"\n",
"g.grid_style = cotton_candy"
]
},
{
"cell_type": "markdown",
"id": "cordless-delaware",
"metadata": {},
"source": [
"### Watermelon themed grid\n",
"\n",
"Combining custom renderers and top level grid styling"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "about-worse",
"metadata": {},
"outputs": [],
"source": [
"watermelon = {\n",
" \"column_background_color\": grid.VegaExpr(\n",
" \"cell % 2 === 0 ? 'rgb(255, 130, 145, 0.5)' : 'rgb(255, 130, 145, 0.2)'\"\n",
" ),\n",
" \"header_vertical_grid_line_color\": \"rgb(0, 140, 86, 0.8)\",\n",
" \"header_horizontal_grid_line_color\": \"rgb(0, 140, 86, 0.4)\",\n",
" \"vertical_grid_line_color\": \"rgb(176, 176, 176)\",\n",
" \"horizontal_grid_line_color\": \"rgb(0, 247, 181, 0)\",\n",
" \"selection_fill_color\": \"rgb(235, 223, 7, 0.3)\",\n",
" \"selection_border_color\": \"rgb(201, 219, 7)\",\n",
" \"header_selection_fill_color\": \"rgb(235, 223, 7, 0.4)\",\n",
" \"header_selection_border_color\": \"rgb(252, 3, 115)\",\n",
" \"cursor_fill_color\": \"rgb(235, 7, 113, 0.4)\",\n",
" \"cursor_border_color\": \"rgb(6, 191, 58, 0.9)\",\n",
"}\n",
"\n",
"\n",
"g.grid_style = watermelon\n",
"g.corner_renderer = grid.TextRenderer(\n",
" background_color=\"rgb(250, 242, 130)\", text_color=\"black\"\n",
")\n",
"g.header_renderer = grid.TextRenderer(\n",
" background_color=grid.VegaExpr(\n",
" \"cell.column % 2 === 0 ? 'rgb(34, 110, 29)': 'rgb(24, 150, 19)'\"\n",
" ),\n",
" text_color=\"white\",\n",
")\n",
"g.renderers = {\n",
" \"key\": grid.TextRenderer(\n",
" background_color=grid.VegaExpr(\n",
" \"cell.row % 2 === 0 ? 'rgb(21, 116, 163)': 'rgb(21, 116, 163)'\"\n",
" ),\n",
" text_color=\"white\",\n",
" )\n",
"}"
]
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 3 (ipykernel)",
"language": "python",
"name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.8.11"
}
},
"nbformat": 4,
"nbformat_minor": 5
}