Skip to content

Commit 8c37b88

Browse files
ibdafnagaborbernat
ibdafna
authored and
gaborbernat
committed
Release 1.1.1 🎉
Signed-off-by: Itay Dafna <[email protected]>
1 parent 921775e commit 8c37b88

File tree

3 files changed

+214
-2
lines changed

3 files changed

+214
-2
lines changed

‎examples/Themes.ipynb‎

Lines changed: 212 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,212 @@
1+
{
2+
"cells": [
3+
{
4+
"cell_type": "markdown",
5+
"id": "initial-museum",
6+
"metadata": {},
7+
"source": [
8+
"### `ipydatagrid` allows for an incredible level of style customisation!\n",
9+
"\n",
10+
"Styling can be applied on three layers:\n",
11+
"\n",
12+
"1. Default renderers: header (columns), corner (top left corner) and default (body)\n",
13+
"2. Overall grid style: a set of attributes that can be applied directly to the grid *without* the need for a specific renderer\n",
14+
"3. Column-specific renderers\n",
15+
"\n",
16+
"The default renderers which you can apply to the DataGrid are `default_renderer`, `header_renderer` and `corner_renderer`.\n",
17+
"\n",
18+
"The grid style property can be defined via `grid_style`. **Overall grid styles take medium priority and will override default renderer styles!** \n",
19+
"The available properties are listed below:\n",
20+
"\n",
21+
"1. `void_color`: color of the area where the grid is not painted on the canvas\n",
22+
"2. `background_color`: background color for all body cells\n",
23+
"3. `row_background_color`: row-wise background color (takes a Vega Expression)\n",
24+
"4. `column_background_color`: column-wise background color (takes a Vega Expression)\n",
25+
"5. `grid_line_color`: color of both vertical and horizontal grid lines\n",
26+
"6. `vertical_grid_line_color`: vertical grid line color\n",
27+
"7. `horizontal_grid_line_color`: horizontal grid line color\n",
28+
"8. `header_background_color`: background color for all non-body cells (index and columns)\n",
29+
"9. `header_grid_line_color`: grid line color for all non-body cells (index and columns)\n",
30+
"10. `header_vertical_grid_line_color`: vertical grid line color for all non-body cells\n",
31+
"11. `header_horizontal_grid_line_color`: horizontal grid line color for all non-body cells\n",
32+
"12. `selection_fill_color`: fill color of selected area selection_border_color : border color of selected area\n",
33+
"13. `header_selection_fill_color`: fill color of headers intersecting with selected area at column or row\n",
34+
"14. `header_selection_border_color`: border color of headers intersecting with selected area at column or row\n",
35+
"15. `cursor_fill_color`: fill color of cursor\n",
36+
"16. `cursor_border_color`: border color of cursor\n",
37+
"17. `scroll_shadow` : Dict of color parameters for scroll shadow (vertical and horizontal). Takes three paramaters:\n",
38+
" * `size` : size of shadow in pixels\n",
39+
" * `color1` : gradient color 1\n",
40+
" * `color2` : gradient color 2\n",
41+
" * `color3` : gradient color 3\n",
42+
"\n",
43+
"\n",
44+
"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.**"
45+
]
46+
},
47+
{
48+
"cell_type": "code",
49+
"execution_count": null,
50+
"id": "applicable-groove",
51+
"metadata": {},
52+
"outputs": [],
53+
"source": [
54+
"import pandas as pd\n",
55+
"import numpy as np\n",
56+
"import ipydatagrid as grid\n",
57+
"\n",
58+
"np.random.seed(104)\n",
59+
"rang = 10\n",
60+
"df = pd.DataFrame(\n",
61+
" data=[np.random.randint(0, 11, rang) for i in range(rang)],\n",
62+
" index=[f\"Row {i}\" for i in range(rang)],\n",
63+
" columns=[f\"Col {i}\" for i in range(rang)],\n",
64+
")\n",
65+
"\n",
66+
"g = grid.DataGrid(\n",
67+
" df, layout={\"height\": \"300px\", \"width\": \"800px\"}, selection_mode=\"cell\"\n",
68+
")\n",
69+
"g"
70+
]
71+
},
72+
{
73+
"cell_type": "markdown",
74+
"id": "third-import",
75+
"metadata": {},
76+
"source": [
77+
"### Monokai-based theme for dark backgrounds\n",
78+
"Using only top-level grid styling without custom renderers"
79+
]
80+
},
81+
{
82+
"cell_type": "code",
83+
"execution_count": null,
84+
"id": "related-candle",
85+
"metadata": {},
86+
"outputs": [],
87+
"source": [
88+
"monokai = {\n",
89+
" \"background_color\": \"#2c292d\",\n",
90+
" \"grid_line_color\": \"#a698eb7a\",\n",
91+
" \"header_background_color\": \"#2c292d9a\",\n",
92+
" \"header_grid_line_color\": \"#fc98675a\",\n",
93+
" \"selection_fill_color\": \"#78dce81a\",\n",
94+
" \"selection_border_color\": \"#ffd866\",\n",
95+
" \"header_selection_fill_color\": \"#ab9df24a\",\n",
96+
" \"header_selection_border_color\": \"lawngreen\",\n",
97+
" \"cursor_fill_color\": \"#78dce87a\",\n",
98+
" \"cursor_border_color\": \"#ff6188\",\n",
99+
"}\n",
100+
"\n",
101+
"g.grid_style = monokai"
102+
]
103+
},
104+
{
105+
"cell_type": "markdown",
106+
"id": "satisfactory-castle",
107+
"metadata": {},
108+
"source": [
109+
"### Cotton candy theme for light backgrounds"
110+
]
111+
},
112+
{
113+
"cell_type": "code",
114+
"execution_count": null,
115+
"id": "smoking-prince",
116+
"metadata": {},
117+
"outputs": [],
118+
"source": [
119+
"cotton_candy = {\n",
120+
" \"background_color\": \"rgb(255, 245, 251)\",\n",
121+
" \"header_background_color\": \"rgb(207, 212, 252, 1)\",\n",
122+
" \"header_grid_line_color\": \"rgb(0, 247, 181, 0.9)\",\n",
123+
" \"vertical_grid_line_color\": \"rgb(0, 247, 181, 0.3)\",\n",
124+
" \"horizontal_grid_line_color\": \"rgb(0, 247, 181, 0.3)\",\n",
125+
" \"selection_fill_color\": \"rgb(212, 245, 255, 0.3)\",\n",
126+
" \"selection_border_color\": \"rgb(78, 174, 212)\",\n",
127+
" \"header_selection_fill_color\": \"rgb(212, 255, 239, 0.3)\",\n",
128+
" \"header_selection_border_color\": \"rgb(252, 3, 115)\",\n",
129+
" \"cursor_fill_color\": \"rgb(186, 32, 186, 0.2)\",\n",
130+
" \"cursor_border_color\": \"rgb(191, 191, 78)\",\n",
131+
"}\n",
132+
"\n",
133+
"g.grid_style = cotton_candy"
134+
]
135+
},
136+
{
137+
"cell_type": "markdown",
138+
"id": "cordless-delaware",
139+
"metadata": {},
140+
"source": [
141+
"### Watermelon themed grid\n",
142+
"\n",
143+
"Combining custom renderers and top level grid styling"
144+
]
145+
},
146+
{
147+
"cell_type": "code",
148+
"execution_count": null,
149+
"id": "about-worse",
150+
"metadata": {},
151+
"outputs": [],
152+
"source": [
153+
"watermelon = {\n",
154+
" \"column_background_color\": grid.VegaExpr(\n",
155+
" \"cell % 2 === 0 ? 'rgb(255, 130, 145, 0.5)' : 'rgb(255, 130, 145, 0.2)'\"\n",
156+
" ),\n",
157+
" \"header_vertical_grid_line_color\": \"rgb(0, 140, 86, 0.8)\",\n",
158+
" \"header_horizontal_grid_line_color\": \"rgb(0, 140, 86, 0.4)\",\n",
159+
" \"vertical_grid_line_color\": \"rgb(176, 176, 176)\",\n",
160+
" \"horizontal_grid_line_color\": \"rgb(0, 247, 181, 0)\",\n",
161+
" \"selection_fill_color\": \"rgb(235, 223, 7, 0.3)\",\n",
162+
" \"selection_border_color\": \"rgb(201, 219, 7)\",\n",
163+
" \"header_selection_fill_color\": \"rgb(235, 223, 7, 0.4)\",\n",
164+
" \"header_selection_border_color\": \"rgb(252, 3, 115)\",\n",
165+
" \"cursor_fill_color\": \"rgb(235, 7, 113, 0.4)\",\n",
166+
" \"cursor_border_color\": \"rgb(6, 191, 58, 0.9)\",\n",
167+
"}\n",
168+
"\n",
169+
"\n",
170+
"g.grid_style = watermelon\n",
171+
"g.corner_renderer = grid.TextRenderer(\n",
172+
" background_color=\"rgb(250, 242, 130)\", text_color=\"black\"\n",
173+
")\n",
174+
"g.header_renderer = grid.TextRenderer(\n",
175+
" background_color=grid.VegaExpr(\n",
176+
" \"cell.column % 2 === 0 ? 'rgb(34, 110, 29)': 'rgb(24, 150, 19)'\"\n",
177+
" ),\n",
178+
" text_color=\"white\",\n",
179+
")\n",
180+
"g.renderers = {\n",
181+
" \"index\": grid.TextRenderer(\n",
182+
" background_color=grid.VegaExpr(\n",
183+
" \"cell.row % 2 === 0 ? 'rgb(21, 116, 163)': 'rgb(21, 116, 163)'\"\n",
184+
" ),\n",
185+
" text_color=\"white\",\n",
186+
" )\n",
187+
"}"
188+
]
189+
}
190+
],
191+
"metadata": {
192+
"kernelspec": {
193+
"display_name": "Python 3",
194+
"language": "python",
195+
"name": "python3"
196+
},
197+
"language_info": {
198+
"codemirror_mode": {
199+
"name": "ipython",
200+
"version": 3
201+
},
202+
"file_extension": ".py",
203+
"mimetype": "text/x-python",
204+
"name": "python",
205+
"nbconvert_exporter": "python",
206+
"pygments_lexer": "ipython3",
207+
"version": "3.9.5"
208+
}
209+
},
210+
"nbformat": 4,
211+
"nbformat_minor": 5
212+
}

‎ipydatagrid/_version.py‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
# Copyright (c) Bloomberg.
22
# Distributed under the terms of the Modified BSD License.
33

4-
__version__ = "1.1.0"
4+
__version__ = "1.1.1"

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ipydatagrid",
3-
"version": "1.1.0",
3+
"version": "1.1.1",
44
"description": "Fast Datagrid widget for the Jupyter Notebook and JupyterLab",
55
"keywords": [
66
"jupyter",

0 commit comments

Comments
 (0)