Skip to content

Commit 489c27e

Browse files
noknok
committed
feat: Add gallery rendering feature for DataFrames
1 parent 4037e76 commit 489c27e

File tree

6 files changed

+204
-90
lines changed

6 files changed

+204
-90
lines changed

‎examples/01_basics.ipynb

Lines changed: 107 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"cells": [
33
{
44
"cell_type": "markdown",
5-
"id": "68dc5021",
5+
"id": "1d7f096b",
66
"metadata": {},
77
"source": [
88
"# pandas-render\n",
@@ -26,13 +26,13 @@
2626
{
2727
"cell_type": "code",
2828
"execution_count": 1,
29-
"id": "6ea43e77",
29+
"id": "19754f59",
3030
"metadata": {
3131
"execution": {
32-
"iopub.execute_input": "2025-04-07T00:28:52.409362Z",
33-
"iopub.status.busy": "2025-04-07T00:28:52.408839Z",
34-
"iopub.status.idle": "2025-04-07T00:28:52.592818Z",
35-
"shell.execute_reply": "2025-04-07T00:28:52.592444Z"
32+
"iopub.execute_input": "2025-04-07T17:30:47.432559Z",
33+
"iopub.status.busy": "2025-04-07T17:30:47.432243Z",
34+
"iopub.status.idle": "2025-04-07T17:30:47.637396Z",
35+
"shell.execute_reply": "2025-04-07T17:30:47.637034Z"
3636
}
3737
},
3838
"outputs": [],
@@ -42,7 +42,7 @@
4242
},
4343
{
4444
"cell_type": "markdown",
45-
"id": "bee15df6",
45+
"id": "9426c10f",
4646
"metadata": {},
4747
"source": [
4848
"Or import it implicitly after importing pandas:\n",
@@ -55,7 +55,7 @@
5555
},
5656
{
5757
"cell_type": "markdown",
58-
"id": "58169ddd",
58+
"id": "9b629166",
5959
"metadata": {},
6060
"source": [
6161
"### Data\n",
@@ -65,13 +65,13 @@
6565
{
6666
"cell_type": "code",
6767
"execution_count": 2,
68-
"id": "7daa0abe",
68+
"id": "14ea1b91",
6969
"metadata": {
7070
"execution": {
71-
"iopub.execute_input": "2025-04-07T00:28:52.594680Z",
72-
"iopub.status.busy": "2025-04-07T00:28:52.594539Z",
73-
"iopub.status.idle": "2025-04-07T00:28:52.597500Z",
74-
"shell.execute_reply": "2025-04-07T00:28:52.597234Z"
71+
"iopub.execute_input": "2025-04-07T17:30:47.639175Z",
72+
"iopub.status.busy": "2025-04-07T17:30:47.639024Z",
73+
"iopub.status.idle": "2025-04-07T17:30:47.642981Z",
74+
"shell.execute_reply": "2025-04-07T17:30:47.642640Z"
7575
}
7676
},
7777
"outputs": [],
@@ -108,7 +108,7 @@
108108
},
109109
{
110110
"cell_type": "markdown",
111-
"id": "b37e95b2",
111+
"id": "ec553af5",
112112
"metadata": {},
113113
"source": [
114114
"Here is the original rendering of the DataFrame. It's a simple table with no formatting or styling. It's not very readable, and the data is not very visually appealing."
@@ -117,13 +117,13 @@
117117
{
118118
"cell_type": "code",
119119
"execution_count": 3,
120-
"id": "1f2f75bd",
120+
"id": "d638b411",
121121
"metadata": {
122122
"execution": {
123-
"iopub.execute_input": "2025-04-07T00:28:52.598862Z",
124-
"iopub.status.busy": "2025-04-07T00:28:52.598747Z",
125-
"iopub.status.idle": "2025-04-07T00:28:52.605018Z",
126-
"shell.execute_reply": "2025-04-07T00:28:52.604748Z"
123+
"iopub.execute_input": "2025-04-07T17:30:47.644468Z",
124+
"iopub.status.busy": "2025-04-07T17:30:47.644275Z",
125+
"iopub.status.idle": "2025-04-07T17:30:47.652089Z",
126+
"shell.execute_reply": "2025-04-07T17:30:47.651611Z"
127127
}
128128
},
129129
"outputs": [
@@ -216,7 +216,7 @@
216216
},
217217
{
218218
"cell_type": "markdown",
219-
"id": "f675bb5c",
219+
"id": "b9d4a17d",
220220
"metadata": {},
221221
"source": [
222222
"### Rendering\n",
@@ -226,13 +226,13 @@
226226
{
227227
"cell_type": "code",
228228
"execution_count": 4,
229-
"id": "7294211c",
229+
"id": "da1276d0",
230230
"metadata": {
231231
"execution": {
232-
"iopub.execute_input": "2025-04-07T00:28:52.606415Z",
233-
"iopub.status.busy": "2025-04-07T00:28:52.606326Z",
234-
"iopub.status.idle": "2025-04-07T00:28:52.612477Z",
235-
"shell.execute_reply": "2025-04-07T00:28:52.612154Z"
232+
"iopub.execute_input": "2025-04-07T17:30:47.654152Z",
233+
"iopub.status.busy": "2025-04-07T17:30:47.654024Z",
234+
"iopub.status.idle": "2025-04-07T17:30:47.662245Z",
235+
"shell.execute_reply": "2025-04-07T17:30:47.661961Z"
236236
}
237237
},
238238
"outputs": [
@@ -267,7 +267,7 @@
267267
},
268268
{
269269
"cell_type": "markdown",
270-
"id": "fc3abf15",
270+
"id": "4cd2cc89",
271271
"metadata": {},
272272
"source": [
273273
"### Filtering and Ordering\n",
@@ -277,13 +277,13 @@
277277
{
278278
"cell_type": "code",
279279
"execution_count": 5,
280-
"id": "e7140340",
280+
"id": "c9378ef0",
281281
"metadata": {
282282
"execution": {
283-
"iopub.execute_input": "2025-04-07T00:28:52.614022Z",
284-
"iopub.status.busy": "2025-04-07T00:28:52.613928Z",
285-
"iopub.status.idle": "2025-04-07T00:28:52.617942Z",
286-
"shell.execute_reply": "2025-04-07T00:28:52.617661Z"
283+
"iopub.execute_input": "2025-04-07T17:30:47.663706Z",
284+
"iopub.status.busy": "2025-04-07T17:30:47.663611Z",
285+
"iopub.status.idle": "2025-04-07T17:30:47.668254Z",
286+
"shell.execute_reply": "2025-04-07T17:30:47.667971Z"
287287
},
288288
"lines_to_next_cell": 2
289289
},
@@ -317,7 +317,7 @@
317317
},
318318
{
319319
"cell_type": "markdown",
320-
"id": "8aa1adef",
320+
"id": "cb0eb6f5",
321321
"metadata": {},
322322
"source": [
323323
"### Dynamic Placeholder\n",
@@ -328,13 +328,13 @@
328328
{
329329
"cell_type": "code",
330330
"execution_count": 6,
331-
"id": "b109afa6",
331+
"id": "de08bd58",
332332
"metadata": {
333333
"execution": {
334-
"iopub.execute_input": "2025-04-07T00:28:52.619231Z",
335-
"iopub.status.busy": "2025-04-07T00:28:52.619147Z",
336-
"iopub.status.idle": "2025-04-07T00:28:52.624303Z",
337-
"shell.execute_reply": "2025-04-07T00:28:52.624019Z"
334+
"iopub.execute_input": "2025-04-07T17:30:47.669544Z",
335+
"iopub.status.busy": "2025-04-07T17:30:47.669450Z",
336+
"iopub.status.idle": "2025-04-07T17:30:47.675089Z",
337+
"shell.execute_reply": "2025-04-07T17:30:47.674763Z"
338338
}
339339
},
340340
"outputs": [
@@ -412,6 +412,76 @@
412412
" custom_columns_names=[\"Image\", \"Title\", \"Actors\"],\n",
413413
")"
414414
]
415+
},
416+
{
417+
"cell_type": "markdown",
418+
"id": "00e5f72a",
419+
"metadata": {},
420+
"source": [
421+
"### Gallery\n",
422+
"If you have just one column to render, you can use the parameter `n` to specify the number of cells to render in each row side by side. This is useful for creating an overview of images or other content. The table head will be hidden automatically."
423+
]
424+
},
425+
{
426+
"cell_type": "code",
427+
"execution_count": 7,
428+
"id": "1cef151d",
429+
"metadata": {
430+
"execution": {
431+
"iopub.execute_input": "2025-04-07T17:30:47.676327Z",
432+
"iopub.status.busy": "2025-04-07T17:30:47.676238Z",
433+
"iopub.status.idle": "2025-04-07T17:30:47.680299Z",
434+
"shell.execute_reply": "2025-04-07T17:30:47.680024Z"
435+
}
436+
},
437+
"outputs": [
438+
{
439+
"data": {
440+
"text/html": [
441+
"<table><tr><td>\n",
442+
" <div style=\"text-align: center;\">\n",
443+
" <img src=\"https://m.media-amazon.com/images/M/MV5BZDI5YzJhODQtMzQyNy00YWNmLWIxMjUtNDBjNjA5YWRjMzExXkEyXkFqcGc@._V1_QL75_UX380_CR0,4,380,562_.jpg\" width=\"100\"/>\n",
444+
" <p><a href=\"https://www.imdb.com/title/tt11280740\" target=\"_blank\">SEVERANCE</a></p>\n",
445+
" <p><smaller><strong>8.7 ★</strong></smaller></p>\n",
446+
" </div>\n",
447+
" </td><td>\n",
448+
" <div style=\"text-align: center;\">\n",
449+
" <img src=\"https://m.media-amazon.com/images/M/MV5BMjg2NmM0MTEtYWY2Yy00NmFlLTllNTMtMjVkZjEwMGVlNzdjXkEyXkFqcGc@._V1_QL75_UX380_CR0,0,380,562_.jpg\" width=\"100\"/>\n",
450+
" <p><a href=\"https://www.imdb.com/title/tt4574334\" target=\"_blank\">STRANGER THINGS</a></p>\n",
451+
" <p><smaller><strong>8.6 ★</strong></smaller></p>\n",
452+
" </div>\n",
453+
" </td></tr><tr><td>\n",
454+
" <div style=\"text-align: center;\">\n",
455+
" <img src=\"https://m.media-amazon.com/images/M/MV5BZWUwNjExYTYtZmM3ZS00NzA1LWJhNjYtMWExNGEwZTVjNDM3XkEyXkFqcGc@._V1_QL75_UY562_CR8,0,380,562_.jpg\" width=\"100\"/>\n",
456+
" <p><a href=\"https://www.imdb.com/title/tt0209264\" target=\"_blank\">PYTHON</a></p>\n",
457+
" <p><smaller><strong>3.7 ★</strong></smaller></p>\n",
458+
" </div>\n",
459+
" </td></tr></table>"
460+
],
461+
"text/plain": [
462+
"<IPython.core.display.HTML object>"
463+
]
464+
},
465+
"execution_count": 7,
466+
"metadata": {},
467+
"output_type": "execute_result"
468+
}
469+
],
470+
"source": [
471+
"df.render(\n",
472+
" templates=dict(\n",
473+
" image_url=\"\"\"\n",
474+
" <div style=\"text-align: center;\">\n",
475+
" <img src=\"{{ content }}\" width=\"100\"/>\n",
476+
" <p><a href=\"https://www.imdb.com/title/{{ id }}\" target=\"_blank\">{{ title|upper }}</a></p>\n",
477+
" <p><smaller><strong>{{ rating }} ★</strong></smaller></p>\n",
478+
" </div>\n",
479+
" \"\"\",\n",
480+
" ),\n",
481+
" filter_columns=True,\n",
482+
" n=2,\n",
483+
")"
484+
]
415485
}
416486
],
417487
"metadata": {

‎examples/01_basics.py

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,3 +127,22 @@
127127
filter_columns=True,
128128
custom_columns_names=["Image", "Title", "Actors"],
129129
)
130+
131+
# %% [markdown]
132+
# ### Gallery
133+
# If you have just one column to render, you can use the parameter `n` to specify the number of cells to render in each row side by side. This is useful for creating an overview of images or other content. The table head will be hidden automatically.
134+
135+
# %%
136+
df.render(
137+
templates=dict(
138+
image_url="""
139+
<div style="text-align: center;">
140+
<img src="{{ content }}" width="100"/>
141+
<p><a href="https://www.imdb.com/title/{{ id }}" target="_blank">{{ title|upper }}</a></p>
142+
<p><smaller><strong>{{ rating }} ★</strong></smaller></p>
143+
</div>
144+
""",
145+
),
146+
filter_columns=True,
147+
n=2,
148+
)

0 commit comments

Comments
 (0)