<a id="table"></a>

## Table  
**Category**: Data Display
Data table component with DaisyUI styling
### Examples

#### Active Row  
```python
Div(
    Table(
        Thead(Tr(Th(), Th('Name'), Th('Job'), Th('Favorite Color'))),
        Tbody(
            Tr(Th('1'), Td('Cy Ganderton'), Td('Quality Control Specialist'), Td('Blue'), cls='bg-base-200'),
            Tr(Th('2'), Td('Hart Hagerty'), Td('Desktop Support Technician'), Td('Purple')),
            Tr(Th('3'), Td('Brice Swyre'), Td('Tax Accountant'), Td('Red'))
        ),
        cls='table'
    ),
    cls='overflow-x-auto'
)
```

#### Basic Table  
```python
Div(
    Table(
        Thead(Tr(Th(), Th('Name'), Th('Job'), Th('Favorite Color'))),
        Tbody(
            Tr(Th('1'), Td('Cy Ganderton'), Td('Quality Control Specialist'), Td('Blue')),
            Tr(Th('2'), Td('Hart Hagerty'), Td('Desktop Support Technician'), Td('Purple')),
            Tr(Th('3'), Td('Brice Swyre'), Td('Tax Accountant'), Td('Red'))
        ),
        cls='table'
    ),
    cls='overflow-x-auto'
)
```

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

header_row = Tr(Th(), Th('Name'), Th('Job'), Th('company'), Th('location'), Th('Last Login'), Th('Favorite Color'))

Div(
    Table(
        Thead(header_row),
        Tbody(*[Tr(
            Th(row["id"]),
            Td(row["name"]),
            Td(row["job"]),
            Td(row["company"]),
            Td(row["location"]),
            Td(row["login"]),
            Td(row["color"])
        ) for row in table_data]),
        Tfoot(header_row),
        cls='table table-xs'
    ),
    cls='overflow-x-auto'
)
```

#### Rows highlight on hover  
```python
Div(
    Table(
        Thead(Tr(Th(), Th('Name'), Th('Job'), Th('Favorite Color'))),
        Tbody(
            Tr(Th('1'), Td('Cy Ganderton'), Td('Quality Control Specialist'), Td('Blue')),
            Tr(Th('2'), Td('Hart Hagerty'), Td('Desktop Support Technician'), Td('Purple'), 
               cls='hover:bg-base-300'),
            Tr(Th('3'), Td('Brice Swyre'), Td('Tax Accountant'), Td('Red'))
        ),
        cls='table'
    ),
    cls='overflow-x-auto'
)
```

#### Pinned Rows  
```python
heroes_by_letter = {
    "A": ["Ant-Man", "Aquaman", "Asterix", "The Atom", "The Avengers"],
    "B": ["Batgirl", "Batman", "Batwoman", "Black Canary", "Black Panther"],
    "C": ["Captain America", "Captain Marvel", "Catwoman", "Conan the Barbarian"],
    "D": ["Daredevil", "The Defenders", "Doc Savage", "Doctor Strange"],
    "E": ["Elektra"],
    "F": ["Fantastic Four"],
    "G": ["Ghost Rider", "Green Arrow", "Green Lantern", "Guardians of the Galaxy"],
    "H": ["Hawkeye", "Hellboy", "Incredible Hulk"],
    "I": ["Iron Fist", "Iron Man"],
    "M": ["Marvelman"],
    "R": ["Robin", "The Rocketeer"],
    "S": ["The Shadow", "Spider-Man", "Sub-Mariner", "Supergirl", "Superman"],
    "T": ["Teenage Mutant Ninja Turtles", "Thor"],
    "W": ["The Wasp", "Watchmen", "Wolverine", "Wonder Woman"],
    "X": ["X-Men"],
    "Z": ["Zatanna", "Zatara"]
}

table_content = []
for letter, heroes in heroes_by_letter.items():
    table_content.extend([
        Thead(Tr(Th(letter))),
        Tbody(*[Tr(Td(hero)) for hero in heroes])
    ])

Div(
    Table(
        *table_content,
        cls='table table-pin-rows'
    ),
    cls='h-96 overflow-x-auto'
)
```

#### Alternate Zebra Rows  
```python
Div(
    Table(
        Thead(Tr(Th(), Th('Name'), Th('Job'), Th('Favorite Color'))),
        Tbody(
            Tr(Th('1'), Td('Cy Ganderton'), Td('Quality Control Specialist'), Td('Blue')),
            Tr(Th('2'), Td('Hart Hagerty'), Td('Desktop Support Technician'), Td('Purple')),
            Tr(Th('3'), Td('Brice Swyre'), Td('Tax Accountant'), Td('Red'))
        ),
        cls='table table-zebra'
    ),
    cls='overflow-x-auto'
)
```

#### Visual Elements  
```python
table_data = [ 
    {"img": "2@94.webp", "name": "Hart Hagerty", "location": "United States", "company": "Zemlak, Daniel and Leannon", "job": "Desktop Support Technician", "color": "Purple"},  
    {"img": "3@94.webp", "name": "Brice Swyre", "location": "China", "company": "Carroll Group", "job": "Tax Accountant", "color": "Red"}, 
    {"img": "4@94.webp", "name": "Marjy Ferencz", "location": "Russia", "company": "Rowe-Schoen", "job": "Office Assistant I", "color": "Crimson"}, 
    {"img": "5@94.webp", "name": "Yancy Tear", "location": "Brazil", "company": "Wyman-Ledner", "job": "Community Outreach Specialist", "color": "Indigo"} 
] 
Div(
    Table(
        Thead(Tr(
            Th(Label(Input(type='checkbox', cls='checkbox'))),
            Th('Name'), Th('Job'), Th('Favorite Color'), Th()
        )),
        Tbody(*[Tr(
            Th(Label(Input(type='checkbox', cls='checkbox'))),
            Td(Div(
                Div(
                    Div(
                        Img(
                            src=f'https://img.daisyui.com/images/profile/demo/{row["img"]}',
                            alt='Avatar'
                        ),
                        cls='mask mask-squircle h-12 w-12'
                    ),
                    cls='avatar'
                ),
                Div(
                    Div(row["name"], cls='font-bold'),
                    Div(row["location"], cls='text-sm opacity-50')
                ),
                cls='flex items-center gap-3'
            )),
            Td(
                row["company"],
                Br(),
                Span(row["job"], cls='badge badge-ghost badge-sm')
            ),
            Td(row["color"]),
            Th(Button('details', cls='btn btn-ghost btn-xs'))
        ) for row in table_data]),
        Tfoot(Tr(
            Th(), Th('Name'), Th('Job'), Th('Favorite Color'), Th()
        )),
        cls='table'
    ),
    cls='overflow-x-auto'
)
```

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

header_row = Tr(
    Th(), 
    *[Td(label) for label in ['Name', 'Job', 'company', 'location', 'Last Login', 'Favorite Color']], 
    Th()
)

Div(
    Table(
        Thead(header_row),
        Tbody(*[
            Tr(
                Th(row["id"]),
                Td(row["name"]),
                Td(row["job"]),
                Td(row["company"]),
                Td(row["location"]),
                Td(row["login"]),
                Td(row["color"]),
                Th(row["id"])
            ) for row in table_data
        ]),
        Tfoot(header_row),
        cls='table table-xs table-pin-rows table-pin-cols'
    ),
    cls='h-96 w-96 overflow-x-auto'
    )
```