streamlit

1
# Copyright (c) Streamlit Inc. (2018-2022) Snowflake Inc. (2022-2024)
2
#
3
# Licensed under the Apache License, Version 2.0 (the "License");
4
# you may not use this file except in compliance with the License.
5
# You may obtain a copy of the License at
6
#
7
#     http://www.apache.org/licenses/LICENSE-2.0
8
#
9
# Unless required by applicable law or agreed to in writing, software
10
# distributed under the License is distributed on an "AS IS" BASIS,
11
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12
# See the License for the specific language governing permissions and
13
# limitations under the License.
14

15
import datetime
16
import random
17

18
import numpy as np
19
import pandas as pd
20

21
import streamlit as st
22

23
np.random.seed(0)
24
random.seed(0)
25

26
st.set_page_config(layout="wide")
27

28
# Generate a random dataframe
29
df = pd.DataFrame(
30
    np.random.randn(5, 5),
31
    columns=("col_%d" % i for i in range(5)),
32
)
33

34

35
st.header("Hide index parameter:")
36
st.dataframe(df, hide_index=True)
37
st.dataframe(df, hide_index=False)
38

39
st.header("Column order parameter:")
40
st.dataframe(df, column_order=["col_4", "col_3", "col_0"])
41

42
st.header("Set column labels:")
43
st.dataframe(
44
    df,
45
    column_config={
46
        "_index": "Index column",
47
        "col_0": "Column 0",
48
        "col_2": st.column_config.Column("Column 1"),
49
    },
50
)
51

52
st.header("Hide columns:")
53
st.dataframe(df, column_config={"col_1": None, "col_3": {"hidden": True}})
54

55
st.header("Set column width:")
56
st.dataframe(
57
    df,
58
    column_config={
59
        "col_0": st.column_config.Column(width="small"),
60
        "col_1": st.column_config.Column(width="medium"),
61
        "col_4": {"width": "large"},
62
    },
63
)
64

65
st.header("Set help tooltips:")
66
st.caption("Hover over the column headers to see the tooltips.")
67
st.dataframe(
68
    pd.DataFrame(
69
        {
70
            "col_0": ["a", "b", "c", None],
71
        }
72
    ),
73
    column_config={
74
        "col_0": st.column_config.Column(help="This :red[is] a **tooltip** 🌟"),
75
        "_index": {"help": "Index tooltip!"},
76
    },
77
)
78

79

80
st.header("Ignore editing-only config options:")
81
st.dataframe(
82
    pd.DataFrame(
83
        {
84
            "col_0": ["a", "b", "c", None],
85
        }
86
    ),
87
    column_config={"col_0": st.column_config.Column(disabled=False, required=True)},
88
)
89

90

91
st.header("Text column:")
92

93
st.dataframe(
94
    pd.DataFrame(
95
        {
96
            "col_0": ["Hello World", "Lorem ipsum", "", None],
97
            "col_1": [1, 2, 3, None],
98
        }
99
    ),
100
    column_config={
101
        "col_0": st.column_config.TextColumn(
102
            "Text column",
103
            width="medium",
104
            help="This is a text column",
105
            required=True,  # Should be ignored
106
            disabled=False,  # Should be ignored
107
            default="invalid",  # Should be ignored
108
            max_chars=5,  # Should be ignored
109
            validate="^[0-9]+$",  # Should be ignored
110
        ),
111
        "col_1": st.column_config.TextColumn(),
112
    },
113
)
114

115
st.header("Number column:")
116
st.dataframe(
117
    pd.DataFrame(
118
        {
119
            "col_0": [1, 2, 3, None],
120
            "col_1": ["1", "2", "invalid", None],
121
        }
122
    ),
123
    column_config={
124
        "col_0": st.column_config.NumberColumn(
125
            "Number column",
126
            width="medium",
127
            help="This is a number column",
128
            required=True,  # Should be ignored
129
            disabled=False,  # Should be ignored
130
            default=0,  # Should be ignored
131
            min_value=5,  # Should be ignored
132
            max_value=10,  # Should be ignored
133
            step=0.001,
134
        ),
135
        "col_1": st.column_config.NumberColumn(
136
            format="%.2f%%",
137
        ),
138
    },
139
)
140

141
st.header("Checkbox column:")
142
st.dataframe(
143
    pd.DataFrame(
144
        {
145
            "col_0": [True, False, False, None],
146
            "col_1": ["yes", "no", "invalid", None],
147
        }
148
    ),
149
    column_config={
150
        "col_0": st.column_config.CheckboxColumn(
151
            "Checkbox column",
152
            width="medium",
153
            help="This is a checkbox column",
154
            required=True,  # Should be ignored
155
            disabled=False,  # Should be ignored
156
            default=True,  # Should be ignored
157
        ),
158
        "col_1": st.column_config.CheckboxColumn(),
159
    },
160
)
161

162
st.header("Selectbox column:")
163

164
st.dataframe(
165
    pd.DataFrame(
166
        {
167
            "col_0": [1, 2, 3, None],
168
            "col_1": ["a", "b", "c", None],
169
        }
170
    ),
171
    column_config={
172
        "col_0": st.column_config.SelectboxColumn(
173
            "Selectbox column",
174
            width="medium",
175
            help="This is a selectbox column",
176
            required=True,  # Should be ignored
177
            disabled=False,  # Should be ignored
178
            default=True,  # Should be ignored
179
            options=[1, 2, 3, 4, 5],
180
        ),
181
        "col_1": st.column_config.SelectboxColumn(),
182
    },
183
)
184

185
st.header("Link column:")
186

187
st.dataframe(
188
    pd.DataFrame(
189
        {
190
            "col_0": [
191
                "https://streamlit.io/",
192
                "https://docs.streamlit.io/",
193
                "https://streamlit.io/gallery",
194
                None,
195
            ],
196
            "col_1": ["/a", "/b", "", None],
197
            "col_2": [
198
                "https://roadmap.streamlit.app",
199
                "https://extras.streamlit.app",
200
                "",
201
                None,
202
            ],
203
            "col_3": [
204
                "https://roadmap.streamlit.app",
205
                "https://extras.streamlit.app",
206
                "",
207
                None,
208
            ],
209
        }
210
    ),
211
    column_config={
212
        "col_0": st.column_config.LinkColumn(
213
            "Link column",
214
            width="medium",
215
            help="This is a link column",
216
            required=True,  # Should be ignored
217
            disabled=False,  # Should be ignored
218
            default="https://streamlit.io/",  # Should be ignored
219
            max_chars=5,  # Should be ignored
220
            validate="^[0-9]+$",  # Should be ignored
221
        ),
222
        "col_1": st.column_config.LinkColumn(),
223
        "col_2": st.column_config.LinkColumn(
224
            "Display text via Regex",
225
            display_text="https://(.*?)\.streamlit\.app",
226
        ),
227
        "col_3": st.column_config.LinkColumn(
228
            "Static display text",
229
            display_text="Open link",
230
        ),
231
    },
232
)
233

234
st.header("Datetime column:")
235

236
st.dataframe(
237
    pd.DataFrame(
238
        {
239
            "col_0": [
240
                datetime.datetime(2021, 1, 1, 1, 0, 0, 123000),
241
                datetime.datetime(2022, 1, 2, 2, 0, 0, 234000),
242
                datetime.datetime(2023, 1, 3, 3, 0, 0, 345000),
243
                None,
244
            ],
245
            "col_1": [
246
                "2021-01-01T01:00:00.123",
247
                "2022-01-02T02:00:00.234",
248
                "invalid",
249
                None,
250
            ],
251
            "col_2": [
252
                datetime.date(2021, 1, 1),
253
                datetime.date(2022, 1, 2),
254
                datetime.date(2023, 1, 3),
255
                None,
256
            ],
257
        }
258
    ),
259
    column_config={
260
        "col_0": st.column_config.DatetimeColumn(
261
            "Datetime column",
262
            width="medium",
263
            help="This is a datetime column",
264
            required=True,  # Should be ignored
265
            disabled=False,  # Should be ignored
266
            default=datetime.datetime(2021, 1, 1, 1, 0, 0),  # Should be ignored
267
            min_value=datetime.datetime(2021, 1, 1, 1, 0, 0),  # Should be ignored
268
            max_value=datetime.datetime(2022, 1, 1, 1, 0, 0),  # Should be ignored
269
            step=0.01,
270
            format="YYYY-MM-DD HH:mm:ss.SSS",
271
        ),
272
        "col_1": st.column_config.DatetimeColumn(
273
            step=0.01,
274
        ),
275
        "col_2": st.column_config.DatetimeColumn(),
276
    },
277
)
278

279
st.header("Date column:")
280

281
st.dataframe(
282
    pd.DataFrame(
283
        {
284
            "col_0": [
285
                datetime.date(2021, 1, 1),
286
                datetime.date(2022, 1, 2),
287
                datetime.date(2023, 1, 3),
288
                None,
289
            ],
290
            "col_1": [
291
                "2021-01-01T01:00:00",
292
                "2022-01-02T02:00:00",
293
                "invalid",
294
                None,
295
            ],
296
            "col_2": [
297
                datetime.datetime(2021, 1, 1, 1, 0, 0, 123000),
298
                datetime.datetime(2022, 1, 2, 2, 0, 0, 234000),
299
                datetime.datetime(2023, 1, 3, 3, 0, 0, 345000),
300
                None,
301
            ],
302
        }
303
    ),
304
    column_config={
305
        "col_0": st.column_config.DateColumn(
306
            "Date column",
307
            width="medium",
308
            help="This is a date column",
309
            required=True,  # Should be ignored
310
            disabled=False,  # Should be ignored
311
            default=datetime.date(2021, 1, 1),  # Should be ignored
312
            min_value=datetime.date(2021, 1, 1),  # Should be ignored
313
            max_value=datetime.date(2022, 1, 1),  # Should be ignored
314
            step=2,  # Should be ignored
315
        ),
316
        "col_1": st.column_config.DateColumn(),
317
        "col_2": st.column_config.DateColumn(),
318
    },
319
)
320

321
st.header("Time column:")
322

323
st.dataframe(
324
    pd.DataFrame(
325
        {
326
            "col_0": [
327
                datetime.time(1, 2, 0, 123000),
328
                datetime.time(2, 3, 0, 234000),
329
                datetime.time(3, 4, 0, 345000),
330
                None,
331
            ],
332
            "col_1": [
333
                "2021-01-01T01:02:00",
334
                "2022-01-02T02:03:00",
335
                "invalid",
336
                None,
337
            ],
338
            "col_2": [
339
                datetime.datetime(2021, 1, 1, 1, 0, 0, 123000),
340
                datetime.datetime(2022, 1, 2, 2, 0, 0, 234000),
341
                datetime.datetime(2023, 1, 3, 3, 0, 0, 345000),
342
                None,
343
            ],
344
        }
345
    ),
346
    column_config={
347
        "col_0": st.column_config.TimeColumn(
348
            "Time column",
349
            width="medium",
350
            help="This is a time column",
351
            required=True,  # Should be ignored
352
            disabled=False,  # Should be ignored
353
            default=datetime.time(1, 2, 0),  # Should be ignored
354
            min_value=datetime.time(1, 2, 0),  # Should be ignored
355
            max_value=datetime.time(1, 3, 0),  # Should be ignored
356
            step=datetime.timedelta(milliseconds=1),
357
        ),
358
        "col_1": st.column_config.TimeColumn(
359
            format="HH:mm",
360
        ),
361
        "col_2": st.column_config.TimeColumn(),
362
    },
363
)
364

365
st.header("Progress column:")
366

367
st.dataframe(
368
    pd.DataFrame(
369
        {
370
            "col_0": [0.1, 0.4, 1.1, None],
371
            "col_1": ["200", "550", "1000", None],
372
        }
373
    ),
374
    column_config={
375
        "col_0": st.column_config.ProgressColumn(
376
            "Progress column",
377
            width="medium",
378
            help="This is a progress column",
379
        ),
380
        "col_1": st.column_config.ProgressColumn(
381
            format="$%f", min_value=0, max_value=1000
382
        ),
383
    },
384
)
385

386
st.header("List column:")
387

388
st.dataframe(
389
    pd.DataFrame(
390
        {
391
            "col_0": [[1, 2], [2, 3, 4], [], None],
392
            "col_1": ["a,b", "c,d,e", "", None],
393
        }
394
    ),
395
    column_config={
396
        "col_0": st.column_config.ListColumn(
397
            "List column",
398
            width="medium",
399
            help="This is a list column",
400
        ),
401
        "col_1": st.column_config.ListColumn(),
402
    },
403
)
404

405
st.header("Bar chart column:")
406

407
st.dataframe(
408
    pd.DataFrame(
409
        {
410
            "col_0": [[1, 5, 2], [2, 3, 5, -4, -5], [], None],
411
            "col_1": ["1,2,3,4", "6, 5, 1, 10", "invalid", None],
412
        }
413
    ),
414
    column_config={
415
        "col_0": st.column_config.BarChartColumn(
416
            "Bar chart column",
417
            width="medium",
418
            help="This is a bar chart column",
419
            y_min=-5,
420
            y_max=5,
421
        ),
422
        "col_1": st.column_config.BarChartColumn(),
423
    },
424
)
425

426

427
st.header("Line chart column:")
428

429
st.dataframe(
430
    pd.DataFrame(
431
        {
432
            "col_0": [[1, 5, 2], [2, 3, 5, -4, -5], [], None],
433
            "col_1": ["1,2,3,4", "6, 5, 1, 10", "invalid", None],
434
        }
435
    ),
436
    column_config={
437
        "col_0": st.column_config.LineChartColumn(
438
            "Line chart column",
439
            width="medium",
440
            help="This is a line chart column",
441
            y_min=-5,
442
            y_max=5,
443
        ),
444
        "col_1": st.column_config.LineChartColumn(),
445
    },
446
)
447

448
st.header("Area chart column:")
449

450
st.dataframe(
451
    pd.DataFrame(
452
        {
453
            "col_0": [[1, 5, 2], [2, 3, 5, -4, -5], [], None],
454
            "col_1": ["1,2,3,4", "6, 5, 1, 10", "invalid", None],
455
        }
456
    ),
457
    column_config={
458
        "col_0": st.column_config.AreaChartColumn(
459
            "Area chart column",
460
            width="medium",
461
            help="This is an area chart column",
462
            y_min=-5,
463
            y_max=5,
464
        ),
465
        "col_1": st.column_config.AreaChartColumn(),
466
    },
467
)
468

469

470
st.header("Image column:")
471

472
st.dataframe(
473
    pd.DataFrame(
474
        {
475
            "col_0": [
476
                "https://streamlit.io/images/brand/streamlit-mark-color.png",
477
                "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAABSCAMAAACBpt1yAAAAwFBMVEVHcEyAhJWAhJUzNT97f4+AhJWAhJVtcH9WWWaAhJWAhJWAhJVCRFGAhJWAhJWAhJVVWGeAhJWAhJWAhJVVWGcmJzCAhJWAhJWAhJUmJzAmJzBVWGcmJzAmJzAmJzAmJzAmJzCAhJUmJzBVWGcmJzAmJzAmJzBVWGeAhJVVWGdVWGdVWGeAhJVVWGdVWGdVWGdvcoJVJ2WAhJVVWGcmJzBTVmVaXWx8f5B1eYlhZHNoa3tDRVI3OUQtLzhucoJMT13kXsyQAAAAMXRSTlMA+SYWE/ExBQvmfME1P7Uc9lhpjSdsTZ7cnETlsyP6xvHNg7XXV+bYq6NjTtR1yJLh8/IzCQAABHhJREFUaN7Nmut2mkAYRZGLIMQbRMFbvMQYkmjS9YFJU23z/m9VwEpgGJgZYLo4/2ratXbdhyNMFIS68jzzXm+EpuVl5nne623DqKRXL8yb2iyst4jKG7w0S+HgguU93jZPYZin5mhU32Iqb/DcPIWN0phQGGnUGqewQRpTChuj8fbVQ1ODRnVsDeUaFVbXuBhtpsJYgZYxLP3fUzMKK2qURlvf3wkWBGn1xiVX8PbRw6WsRmm09MOE71YYxe2qNSmMUkqj9rC8i6hWgmzAJYrdVqtfhRU0ag/zC5TvzwVBh2s6drsehWHuGTVq0xjKXz0IgtiBbzBLZFL45OWHSaM6naz8OEspeMWGRBydAex5UIA1Y7iDvklC+f4ofG3cSnLBXu9XV8ik8WayS0L5u0X4qryGdNYm1b5qT4VU3uBAt56bNJTvTy6Xng5o1jTDX6iQVuNis0Wg/Lvp5UftToaLYvgJCqk0RpOOJix8dBm4kA1p+EkKoxyoJh3J5vrzYQvDRRh+okKSRuk66Uh28b/JlD4e/m4FhZFGmTzp+MLjS08YfiqF+RqTk44W/uH7r2FKXzz8VArzNKrT+crPy7XwuaWPwbLDfzPzaJPRqCKTnlf4/NJ/fyKlh1+79+hzKJ703MKH6e+hMPvU8B8YqNIas5OOZJ6eOgsISXwiMShMa8RMekHhw3QVElc8/EwKExqxk45kKyFF7AEx/4b/wEjlzV4ooZDChzGBIsHwsyqMNEpazqQjWU1RrL4DVGD2vXdk55rTQGUKT1X6a/58MmN9namo7kbZ7SWX/pqPP+/MXL9psLYLzOeUAdT5+MUIdjzRvFkT3OenCcAP7HguU/gwosPCBT9/vTN0/0jWeLfE38zaABzByBpH+Fsz+tLHYJ/Ua3Ekatwt8FiyAcARjKRxkneLbgJwBCNcjfjClyh9PGOfdVyNSyn3acQGKAf2Xl3jKP8hadwCrmAn2tvS6qVnASvQOCl6WNahfGiGP1cjeluKlL5TgYtmX0/shRfQMzgOYHkaN8VnKKVLTztjeI07wplT3nFEfWBYjXPSIbcOwBnszFp4wnFETcOP0biViEfRLgBnsBNr4cnHEbXsK6pxRXHIWkPpSfuKapzTHJXrALzBToyFD8vVVoA72Jn0HMat9IXDn9K4EahSV+mLZuyL5rYUOY7YA/AGS3w2zml/N2QBcAc7/qa4La36ZEa3r0fc1UhX+Og4ogfABwxzNU7of+1oAvABe89opC08wxlcxRn7It+W8i89BuzMUnhepU+AHWONuwULlmYAx8TD/1X8HPbfSo/M2PE0ZaIqeRzBDMb6JQ7BbAF/sBnzt41VXeHN9fGjxJdn1bHBF0xx20KZyF3d7hn7jlKvz5bi7A3X1rsVvqqnarLYHg9N3XIDQqejlGJsKUrHWRs929LNYbctylpt3+VVVVnui+1uwBhAWrbb6xnGer13HKeTSvCCs1+vDaPnurYVgJjDcYDSr5GlEDN4J+V+EFEU23GCP4jBa7IcUKilOf4CgQRuuzC9EJcAAAAASUVORK5CYII=",
478
                "data:image/svg+xml,%3Csvg width='301' height='165' viewBox='0 0 301 165' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M150.731 101.547L98.1387 73.7471L6.84674 25.4969C6.7634 25.4136 6.59674 25.4136 6.51341 25.4136C3.18007 23.8303 -0.236608 27.1636 1.0134 30.497L47.5302 149.139L47.5385 149.164C47.5885 149.281 47.6302 149.397 47.6802 149.514C49.5885 153.939 53.7552 156.672 58.2886 157.747C58.6719 157.831 58.9461 157.906 59.4064 157.998C59.8645 158.1 60.5052 158.239 61.0552 158.281C61.1469 158.289 61.2302 158.289 61.3219 158.297H61.3886C61.4552 158.306 61.5219 158.306 61.5886 158.314H61.6802C61.7386 158.322 61.8052 158.322 61.8636 158.322H61.9719C62.0386 158.331 62.1052 158.331 62.1719 158.331V158.331C121.084 164.754 180.519 164.754 239.431 158.331V158.331C240.139 158.331 240.831 158.297 241.497 158.231C241.714 158.206 241.922 158.181 242.131 158.156C242.156 158.147 242.189 158.147 242.214 158.139C242.356 158.122 242.497 158.097 242.639 158.072C242.847 158.047 243.056 158.006 243.264 157.964C243.681 157.872 243.87 157.806 244.436 157.611C245.001 157.417 245.94 157.077 246.527 156.794C247.115 156.511 247.522 156.239 248.014 155.931C248.622 155.547 249.201 155.155 249.788 154.715C250.041 154.521 250.214 154.397 250.397 154.222L250.297 154.164L150.731 101.547Z' fill='%23FF4B4B'/%3E%3Cpath d='M294.766 25.4981H294.683L203.357 73.7483L254.124 149.357L300.524 30.4981V30.3315C301.691 26.8314 298.108 23.6648 294.766 25.4981' fill='%237D353B'/%3E%3Cpath d='M155.598 2.55572C153.264 -0.852624 148.181 -0.852624 145.931 2.55572L98.1389 73.7477L150.731 101.548L250.398 154.222C251.024 153.609 251.526 153.012 252.056 152.381C252.806 151.456 253.506 150.465 254.123 149.356L203.356 73.7477L155.598 2.55572Z' fill='%23BD4043'/%3E%3C/svg%3E%0A",
479
                "",
480
                None,
481
            ],
482
        }
483
    ),
484
    column_config={
485
        "col_0": st.column_config.ImageColumn(
486
            "Image column",
487
            width="medium",
488
            help="This is a image column",
489
        ),
490
    },
491
)
492

493
st.subheader("Long colum header")
494
st.dataframe(
495
    pd.DataFrame(
496
        np.random.randn(100, 15),
497
        columns=[
498
            "this is a very long column header name",
499
            "A",
500
            "Short header",
501
            "B",
502
            "this is another very very column long header name",
503
            "C",
504
            "this is another very very very very very very very very very very very very very very very long header name",
505
            "D",
506
            "E",
507
            "F",
508
            "G",
509
            "H",
510
            "I",
511
            "J",
512
            "K",
513
        ],
514
    )
515
)
516