Deepyr Documentation

Table

For responsive tables, wrap the Table component in a container with overflow-x-auto.

	Name	Job	Favorite Color
1	Cy Ganderton	Quality Control Specialist	Blue
2	Hart Hagerty	Desktop Support Technician	Purple
3	Brice Swyre	Tax Accountant	Red

Container(
  style: [Layout.overflowXAuto],
  [
    Table([
      thead([...]),
      tbody([...]),
    ]),
  ],
)

Table with border and background

	Name	Job	Favorite Color
1	Cy Ganderton	Quality Control Specialist	Blue
2	Hart Hagerty	Desktop Support Technician	Purple
3	Brice Swyre	Tax Accountant	Red

Container(
  style: [Layout.overflowXAuto, Effects.roundedBox, BorderUtil.border, BgUtil.base100],
  // Use `classes` for utilities not yet in deepyr, like border-opacity.
  classes: 'border-base-content/5',
  [
    Table([/* ... */]),
  ],
)

Table with an active row

	Name	Job	Favorite Color
1	Cy Ganderton	Quality Control Specialist	Blue
2	Hart Hagerty	Desktop Support Technician	Purple
3	Brice Swyre	Tax Accountant	Red

// Use .toClasses() to apply a deepyr utility to a primitive `tr` element.
tr(classes: [BgUtil.base200].toClasses(), [
  // ... cells
]),

Table with a row that highlights on hover

	Name	Job	Favorite Color
1	Cy Ganderton	Quality Control Specialist	Blue
2	Hart Hagerty	Desktop Support Technician	Purple
3	Brice Swyre	Tax Accountant	Red

// The `.on([Is.hover])` modifier generates the `hover:` prefix.
tr(classes: [BgUtil.base300.on([Is.hover])].toClasses(), [
  // ... cells
]),

Table with zebra stripes

	Name	Job	Favorite Color
1	Cy Ganderton	Quality Control Specialist	Blue
2	Hart Hagerty	Desktop Support Technician	Purple
3	Brice Swyre	Tax Accountant	Red

Table(
  style: [Table.zebra],
  [/* ... */],
)

Table with visual elements

Compose other deepyr components inside your table cells.

Name	Job	Favorite Color
Hart Hagerty United States	Zemlak, Daniel and Leannon Desktop Support Technician	Purple
Brice Swyre China	Carroll Group Tax Accountant	Red
Marjy Ferencz Russia	Rowe-Schoen Office Assistant I	Crimson
Yancy Tear Brazil	Wyman-Ledner Community Outreach Specialist	Indigo
Name	Job	Favorite Color

// Example of a single row with visual elements
tr([
  th([label([Checkbox()])]),
  td([
    Container(
      style: [Layout.flex, Alignment.itemsCenter, Layout.gap(3)],
      [
        Avatar([
          Mask(
            [img(src: '...')],
            style: [Mask.squircle, Size.w12, Size.h12],
          ),
        ]),
        // ...
      ],
    ),
  ]),
  // ... more cells
])

Table Sizes

	Name	Job	Favorite Color
1	Cy Ganderton	Quality Control Specialist	Blue
2	Hart Hagerty	Desktop Support Technician	Purple
3	Brice Swyre	Tax Accountant	Red

	Name	Job	Favorite Color
1	Cy Ganderton	Quality Control Specialist	Blue
2	Hart Hagerty	Desktop Support Technician	Purple
3	Brice Swyre	Tax Accountant	Red

	Name	Job	Favorite Color
1	Cy Ganderton	Quality Control Specialist	Blue
2	Hart Hagerty	Desktop Support Technician	Purple
3	Brice Swyre	Tax Accountant	Red

	Name	Job	Favorite Color
1	Cy Ganderton	Quality Control Specialist	Blue
2	Hart Hagerty	Desktop Support Technician	Purple
3	Brice Swyre	Tax Accountant	Red

	Name	Job	Favorite Color
1	Cy Ganderton	Quality Control Specialist	Blue
2	Hart Hagerty	Desktop Support Technician	Purple
3	Brice Swyre	Tax Accountant	Red

Table(style: [Table.xl], [/* ... */]),
Table(style: [Table.lg], [/* ... */]),
Table(style: [Table.md], [/* ... */]), // Default
Table(style: [Table.sm], [/* ... */]),
Table(style: [Table.xs], [/* ... */]),

Table xs

	Name	Job	Company	Location	Last Login	Favorite Color
1	Cy Ganderton	Quality Control Specialist	Littel, Schaden and Vandervort	Canada	12/16/2020	Blue
2	Hart Hagerty	Desktop Support Technician	Zemlak, Daniel and Leannon	United States	12/5/2020	Purple
3	Brice Swyre	Tax Accountant	Carroll Group	China	8/15/2020	Red
4	Marjy Ferencz	Office Assistant I	Rowe-Schoen	Russia	3/25/2021	Crimson
5	Yancy Tear	Community Outreach Specialist	Wyman-Ledner	Brazil	5/22/2020	Indigo
6	Irma Vasilik	Editor	Wiza, Bins and Emard	Venezuela	12/8/2020	Purple
7	Meghann Durtnal	Staff Accountant IV	Schuster-Schimmel	Philippines	2/17/2021	Yellow
8	Sammy Seston	Accountant I	O'Hara, Welch and Keebler	Indonesia	5/23/2020	Crimson
9	Lesya Tinham	Safety Technician IV	Turner-Kuhlman	Philippines	2/21/2021	Maroon
10	Zaneta Tewkesbury	VP Marketing	Sauer LLC	Chad	6/23/2020	Green
11	Andy Tipple	Librarian	Hilpert Group	Poland	7/9/2020	Indigo
12	Sophi Biles	Recruiting Manager	Gutmann Inc	Indonesia	2/12/2021	Maroon
13	Florida Garces	Web Developer IV	Gaylord, Pacocha and Baumbach	Poland	5/31/2020	Purple
14	Maribeth Popping	Analyst Programmer	Deckow-Pouros	Portugal	4/27/2021	Aquamarine
15	Moritz Dryburgh	Dental Hygienist	Schiller, Cole and Hackett	Sri Lanka	8/8/2020	Crimson
16	Reid Semiras	Teacher	Sporer, Sipes and Rogahn	Poland	7/30/2020	Green
17	Alec Lethby	Teacher	Reichel, Glover and Hamill	China	2/28/2021	Khaki
18	Aland Wilber	Quality Control Specialist	Kshlerin, Rogahn and Swaniawski	Czech Republic	9/29/2020	Purple
19	Teddie Duerden	Staff Accountant III	Pouros, Ullrich and Windler	France	10/27/2020	Aquamarine
20	Lorelei Blackstone	Data Coordinator	Witting, Kutch and Greenfelder	Kazakhstan	6/3/2020	Red
	Name	Job	Company	Location	Last Login	Favorite Color

Container(
  style: [Layout.overflowXAuto],
  [
    Table(
      style: [Table.xs],
      [
        thead([...]),
        tbody([...]), // Render rows from a data list
        tfoot([...]),
      ],
    ),
  ],
)

Table with pinned rows

`thead` and `tfoot` are sticky. Requires a container with a fixed height.

A
Name 1
Name 2
B
Name 1
Name 2
C
Name 1
Name 2
D
Name 1
Name 2
E
Name 1
Name 2
F
Name 1
Name 2
G
Name 1
Name 2
H
Name 1
Name 2
I
Name 1
Name 2
J
Name 1
Name 2
K
Name 1
Name 2
L
Name 1
Name 2
M
Name 1
Name 2
N
Name 1
Name 2
O
Name 1
Name 2
P
Name 1
Name 2
Q
Name 1
Name 2
R
Name 1
Name 2
S
Name 1
Name 2
T
Name 1
Name 2
U
Name 1
Name 2
V
Name 1
Name 2
W
Name 1
Name 2
X
Name 1
Name 2
Y
Name 1
Name 2
Z
Name 1
Name 2

Container(
  style: [Size.h96, Layout.overflowXAuto],
  [
    Table(
      style: [Table.pinRows],
      [
        // Use multiple thead sections to create sticky groups
        thead([ tr([ th([text('A')]) ]) ]),
        tbody([ tr([ td([text('Ant-Man')]) ]) ]),

        thead([ tr([ th([text('B')]) ]) ]),
        tbody([ tr([ td([text('Batman')]) ]) ]),
        // ... and so on
      ],
    ),
  ],
)

Table with pinned rows and cols

First and last columns are sticky. Requires a container with fixed height and width.

	Name	Job	Company	Location	Last Login	Favorite Color
1	Cy Ganderton	Quality Control Specialist	Littel, Schaden and Vandervort	Canada	12/16/2020	Blue	1
2	Cy Ganderton	Quality Control Specialist	Littel, Schaden and Vandervort	Canada	12/16/2020	Blue	2
3	Cy Ganderton	Quality Control Specialist	Littel, Schaden and Vandervort	Canada	12/16/2020	Blue	3
4	Cy Ganderton	Quality Control Specialist	Littel, Schaden and Vandervort	Canada	12/16/2020	Blue	4
5	Cy Ganderton	Quality Control Specialist	Littel, Schaden and Vandervort	Canada	12/16/2020	Blue	5
6	Cy Ganderton	Quality Control Specialist	Littel, Schaden and Vandervort	Canada	12/16/2020	Blue	6
7	Cy Ganderton	Quality Control Specialist	Littel, Schaden and Vandervort	Canada	12/16/2020	Blue	7
8	Cy Ganderton	Quality Control Specialist	Littel, Schaden and Vandervort	Canada	12/16/2020	Blue	8
9	Cy Ganderton	Quality Control Specialist	Littel, Schaden and Vandervort	Canada	12/16/2020	Blue	9
10	Cy Ganderton	Quality Control Specialist	Littel, Schaden and Vandervort	Canada	12/16/2020	Blue	10
11	Cy Ganderton	Quality Control Specialist	Littel, Schaden and Vandervort	Canada	12/16/2020	Blue	11
12	Cy Ganderton	Quality Control Specialist	Littel, Schaden and Vandervort	Canada	12/16/2020	Blue	12
13	Cy Ganderton	Quality Control Specialist	Littel, Schaden and Vandervort	Canada	12/16/2020	Blue	13
14	Cy Ganderton	Quality Control Specialist	Littel, Schaden and Vandervort	Canada	12/16/2020	Blue	14
15	Cy Ganderton	Quality Control Specialist	Littel, Schaden and Vandervort	Canada	12/16/2020	Blue	15
16	Cy Ganderton	Quality Control Specialist	Littel, Schaden and Vandervort	Canada	12/16/2020	Blue	16
17	Cy Ganderton	Quality Control Specialist	Littel, Schaden and Vandervort	Canada	12/16/2020	Blue	17
18	Cy Ganderton	Quality Control Specialist	Littel, Schaden and Vandervort	Canada	12/16/2020	Blue	18
19	Cy Ganderton	Quality Control Specialist	Littel, Schaden and Vandervort	Canada	12/16/2020	Blue	19
20	Cy Ganderton	Quality Control Specialist	Littel, Schaden and Vandervort	Canada	12/16/2020	Blue	20
	Name	Job	Company	Location	Last Login	Favorite Color

Container(
  style: [Size.h96, Size.w96, Layout.overflowXAuto],
  [
    Table(
      style: [Table.xs, Table.pinRows, Table.pinCols],
      [
        thead([/* ... */]),
        tbody([
          // To pin columns, the first and last cell in each row
          // must be a `th` (table header cell).
          tr([
            th([text('1')]), // Pinned
            td([text('Cy Ganderton')]),
            // ...
            th([text('1')]), // Pinned
          ]),
          // ... more rows
        ]),
        tfoot([/* ... */]),
      ],
    ),
  ],
)