# Table Tables are structured grid components that organize large amounts of raw information into horizontal rows and vertical columns. They are designed to let users quickly scan, sort, compare and take action on complex data sets. **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-table--introduction ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Table. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Group Headers And Advanced States — Group Headers & Advanced States HTML: ```html
Region
Quarterly Revenue
Total
Q1 north
Q2 north
Q3 north
Q4 north
North America $1.2M $1.4M $1.1M $1.6M $5.3M
Europe (Selected) $800K $950K $900K $1.0M $3.65M
Asia Pacific (Disabled) $600K $650K $700K $800K $2.75M
``` React: ```jsx import React from 'react'; const TableExample1Demo = () => ( <> {/* Advanced Table: Group Headers, Sorting, defaultSelected State, and disabled State */}
Region
Quarterly Revenue
Total
Q1 north
Q2 north
Q3 north
Q4 north
North America $1.2M $1.4M $1.1M $1.6M $5.3M
Europe (Selected) $800K $950K $900K $1.0M $3.65M
Asia Pacific (Disabled) $600K $650K $700K $800K $2.75M
); export default TableExample1Demo; ``` Angular: ```html
Region
Quarterly Revenue
Total
Q1 north
Q2 north
Q3 north
Q4 north
North America $1.2M $1.4M $1.1M $1.6M $5.3M
Europe (Selected) $800K $950K $900K $1.0M $3.65M
Asia Pacific (Disabled) $600K $650K $700K $800K $2.75M
``` ### 2. Header Row Variants — Header Row Variants HTML: ```html
Name
filter_alt
search
Role
filter_alt
search
Department
filter_alt
search
Status
Actions
AK
Anika Kapoor
Lead Designer Design token Neutral
RJ
Rohan Joshi
Sr. Engineer Engineering token Neutral
Name
Role
Department
Status
AK
Anika Kapoor
Lead Designer Design token Neutral
``` React: ```jsx import React from 'react'; const TableExample2Demo = () => ( <> {/* Header Row Variant: Neutral */}
Name
filter_alt
search
Role
filter_alt
search
Department
filter_alt
search
Status
Actions
AK
Anika Kapoor
Lead Designer Design token Neutral
RJ
Rohan Joshi
Sr. Engineer Engineering token Neutral
{/* Header Row Variant: Brand */}
Name
Role
Department
Status
AK
Anika Kapoor
Lead Designer Design token Neutral
); export default TableExample2Demo; ``` Angular: ```html
Name
filter_alt
search
Role
filter_alt
search
Department
filter_alt
search
Status
Actions
AK
Anika Kapoor
Lead Designer Design token Neutral
RJ
Rohan Joshi
Sr. Engineer Engineering token Neutral
Name
Role
Department
Status
AK
Anika Kapoor
Lead Designer Design token Neutral
``` ### 3. Interactive Headers — Interactive Headers HTML: ```html
City
State
Population
Area more_vert
Mumbai Maharashtra 20.4M 603 km²
Delhi Delhi NCT 16.8M 1,484 km²
Bengaluru Karnataka 12.3M 741 km²
Chennai Tamil Nadu 10.9M 426 km²
``` React: ```jsx import React from 'react'; const TableExample3Demo = () => ( <> {/* Interactive Headers: Sort Cycle + Column Resizing */}
City
State
Population
Area more_vert
Mumbai Maharashtra 20.4M 603 km²
Delhi Delhi NCT 16.8M 1,484 km²
Bengaluru Karnataka 12.3M 741 km²
Chennai Tamil Nadu 10.9M 426 km²
); export default TableExample3Demo; ``` Angular: ```html
City
State
Population
Area more_vert
Mumbai Maharashtra 20.4M 603 km²
Delhi Delhi NCT 16.8M 1,484 km²
Bengaluru Karnataka 12.3M 741 km²
Chennai Tamil Nadu 10.9M 426 km²
``` ### 4. Introduction — Introduction HTML: ```html
Components

Table

Tables are structured grid components that organize large amounts of raw information into horizontal rows and vertical columns. They are designed to let users quickly scan, sort, compare and take action on complex data sets.

Implementation Showcase

Visual demonstration of various table variants including sizes, header styles, row states, and embedded controls.

Size M + Column Dividers

NameRoleDept
Anika KapoorLead DesignerDesign
Rohan JoshiSr. EngineerEngineering

Brand Header + Sortable

City
Population
State
Mumbai20.4MMaharashtra
Delhi16.8MDelhi NCT

Zebra Rows + Row States

DepartmentBudgetStatus
Engineering₹45,00,000token Active
Design₹12,00,000token Review
Marketing₹8,00,000token Paused

Selection + Embedded Controls

 User Actions
AK
Anika Kapoor
RJ
Rohan Joshi

CSS Class Reference

Key CSS classes used across table variants. Click any class name to copy it.

Table Shell

ClassPurpose
ux4g-tableBase table class
ux4g-table-mMedium density
ux4g-table-sSmall / compact density
ux4g-table-responsiveHorizontal scroll wrapper
ux4g-table-roundedRounded table corners

Dividers & Stripes

ClassPurpose
ux4g-table-column-dividersVertical column lines
ux4g-table-no-row-dividersRemove horizontal lines
ux4g-table-zebra-rowsAlternating row shading
ux4g-table-zebra-colsAlternating column shading

Headers & Interaction

ClassPurpose
ux4g-table-header-brandBrand-colored header row
ux4g-table-sortableEnable sort indicators
ux4g-table-resizableResizable column widths
ux4g-table-interactiveRow hover & select states

Row & Cell States

ClassPurpose
ux4g-is-selectedHighlight selected row
ux4g-is-disabledDim disabled row
ux4g-table-cell-avatarAvatar + text cell layout
ux4g-table-cell-icon-btnInline action icon button
``` React: ```jsx import React from 'react'; const TableExample4Demo = () => ( <>
Components

Table

Tables are structured grid components that organize large amounts of raw information into horizontal rows and vertical columns. They are designed to let users quickly scan, sort, compare and take action on complex data sets.

{/* Implementation Showcase */}

Implementation Showcase

Visual demonstration of various table variants including sizes, header styles, row states, and embedded controls.

{/* Size M Preview */}

Size M + Column Dividers

Name Role Dept
Anika Kapoor Lead Designer Design
Rohan Joshi Sr. Engineer Engineering
{/* Brand Header Preview */}

Brand Header + Sortable

City
Population
State
Mumbai 20.4M Maharashtra
Delhi 16.8M Delhi NCT
{/* Zebra Rows Preview */}

Zebra Rows + Row States

Department Budget Status
Engineering ₹45,00,000 token Active
Design ₹12,00,000 token Review
Marketing ₹8,00,000 token Paused
{/* Selection + Embedded controls Preview */}

Selection + Embedded Controls

 User Actions
AK
Anika Kapoor
RJ
Rohan Joshi
{/* CSS Class Reference */}

CSS Class Reference

Key CSS classes used across table variants. Click any class name to copy it.

{/* Table Shell Classes */}

Table Shell

Class Purpose
ux4g-table Base table class
ux4g-table-m Medium density
ux4g-table-s Small / compact density
ux4g-table-responsive Horizontal scroll wrapper
ux4g-table-rounded Rounded table corners
{/* Divider & Stripe Classes */}

Dividers & Stripes

Class Purpose
ux4g-table-column-dividers Vertical column lines
ux4g-table-no-row-dividers Remove horizontal lines
ux4g-table-zebra-rows Alternating row shading
ux4g-table-zebra-cols Alternating column shading
{/* Header & Interaction Classes */}

Headers & Interaction

Class Purpose
ux4g-table-header-brand Brand-colored header row
ux4g-table-sortable Enable sort indicators
ux4g-table-resizable Resizable column widths
ux4g-table-interactive Row hover & select states
{/* Row & Cell State Classes */}

Row & Cell States

Class Purpose
ux4g-is-selected Highlight defaultSelected row
ux4g-is-disabled Dim disabled row
ux4g-table-cell-avatar Avatar + text cell layout
ux4g-table-cell-icon-btn Inline action icon button
); export default TableExample4Demo; ``` Angular: ```html
Components

Table

Tables are structured grid components that organize large amounts of raw information into horizontal rows and vertical columns. They are designed to let users quickly scan, sort, compare and take action on complex data sets.

Implementation Showcase

Visual demonstration of various table variants including sizes, header styles, row states, and embedded controls.

Size M + Column Dividers

NameRoleDept
Anika KapoorLead DesignerDesign
Rohan JoshiSr. EngineerEngineering

Brand Header + Sortable

City
Population
State
Mumbai20.4MMaharashtra
Delhi16.8MDelhi NCT

Zebra Rows + Row States

DepartmentBudgetStatus
Engineering₹45,00,000token Active
Design₹12,00,000token Review
Marketing₹8,00,000token Paused

Selection + Embedded Controls

 User Actions
AK
Anika Kapoor
RJ
Rohan Joshi

CSS Class Reference

Key CSS classes used across table variants. Click any class name to copy it.

Table Shell

ClassPurpose
ux4g-tableBase table class
ux4g-table-mMedium density
ux4g-table-sSmall / compact density
ux4g-table-responsiveHorizontal scroll wrapper
ux4g-table-roundedRounded table corners

Dividers & Stripes

ClassPurpose
ux4g-table-column-dividersVertical column lines
ux4g-table-no-row-dividersRemove horizontal lines
ux4g-table-zebra-rowsAlternating row shading
ux4g-table-zebra-colsAlternating column shading

Headers & Interaction

ClassPurpose
ux4g-table-header-brandBrand-colored header row
ux4g-table-sortableEnable sort indicators
ux4g-table-resizableResizable column widths
ux4g-table-interactiveRow hover & select states

Row & Cell States

ClassPurpose
ux4g-is-selectedHighlight selected row
ux4g-is-disabledDim disabled row
ux4g-table-cell-avatarAvatar + text cell layout
ux4g-table-cell-icon-btnInline action icon button
``` ### 5. Row Interactions And Zebra Striping — Row Interactions & Zebra Striping HTML: ```html
Department Budget Status
Engineering ₹45,00,000 token Neutral
Design (Selected) ₹12,00,000 token Neutral
Marketing (Disabled) ₹8,00,000 token Neutral
HR ₹5,50,000 token Neutral
City State Population Area (km²)
Mumbai Maharashtra 20.4M 603
Delhi Delhi NCT 16.8M 1,484
Bengaluru Karnataka 12.3M 741
Chennai Tamil Nadu 10.9M 426
``` React: ```jsx import React from 'react'; const TableExample5Demo = () => ( <> {/* Variant: Zebra Rows + Interactive Rows */}
Department Budget Status
Engineering ₹45,00,000 token Neutral
Design (Selected) ₹12,00,000 token Neutral
Marketing (Disabled) ₹8,00,000 token Neutral
HR ₹5,50,000 token Neutral
{/* Variant: Zebra Striping - Columns Mode */}
City State Population Area (km²)
Mumbai Maharashtra 20.4M 603
Delhi Delhi NCT 16.8M 1,484
Bengaluru Karnataka 12.3M 741
Chennai Tamil Nadu 10.9M 426
); export default TableExample5Demo; ``` Angular: ```html
Department Budget Status
Engineering ₹45,00,000 token Neutral
Design (Selected) ₹12,00,000 token Neutral
Marketing (Disabled) ₹8,00,000 token Neutral
HR ₹5,50,000 token Neutral
City State Population Area (km²)
Mumbai Maharashtra 20.4M 603
Delhi Delhi NCT 16.8M 1,484
Bengaluru Karnataka 12.3M 741
Chennai Tamil Nadu 10.9M 426
``` ### 6. Size Variations And Dividers — Size Variations & Dividers HTML: ```html
Name Role Department Location
Anika Kapoor Lead Designer Design Mumbai
Rohan Joshi Sr. Engineer Engineering Bangalore
Name Role Department Location
Anika Kapoor Lead Designer Design Mumbai
Rohan Joshi Sr. Engineer Engineering Bangalore
``` React: ```jsx import React from 'react'; const TableExample6Demo = () => ( <> {/* Variant: Size M (Default) + Column Dividers */}
Name Role Department Location
Anika Kapoor Lead Designer Design Mumbai
Rohan Joshi Sr. Engineer Engineering Bangalore
{/* Variant: Size S + No Row Dividers */}
Name Role Department Location
Anika Kapoor Lead Designer Design Mumbai
Rohan Joshi Sr. Engineer Engineering Bangalore
); export default TableExample6Demo; ``` Angular: ```html
Name Role Department Location
Anika Kapoor Lead Designer Design Mumbai
Rohan Joshi Sr. Engineer Engineering Bangalore
Name Role Department Location
Anika Kapoor Lead Designer Design Mumbai
Rohan Joshi Sr. Engineer Engineering Bangalore
``` ### 7. Special Features — Hover Selection, Checkbox, Radio, Avatar, Icon HTML: ```html
User Status (Radio) Action (Icon)
1
avatar
Anika Kapoor
2
account_circle
Rohan Joshi
``` React: ```jsx import React from 'react'; const TableExample7Demo = () => ( <> {/* Special Feature: Hover Selection, Checkbox, Radio, Avatar, Icon */}
User Status (Radio) Action (Icon)
1
avatar
Anika Kapoor
2
account_circle
Rohan Joshi
); export default TableExample7Demo; ``` Angular: ```html
User Status (Radio) Action (Icon)
1
avatar
Anika Kapoor
2
account_circle
Rohan Joshi
``` ### 8. Special Features — Loading State HTML: ```html
Name Role Department Location Status
Loading data...
``` React: ```jsx import React from 'react'; const TableExample8Demo = () => ( <> {/* Special Feature: Loading State */}
Name Role Department Location Status
Loading data...
); export default TableExample8Demo; ``` Angular: ```html
Name Role Department Location Status
Loading data...
``` ### 9. Special Features — Product Catalog (Embedded Inputs, Tags & Media) HTML: ```html
Product
SKU
Category
Price (INR)
Stock
Wireless...
WH-1001 142
Organi...
GT-2045 580
Standi...
SD-3022 67
Runnin...
RS-4011 23
``` React: ```jsx import React from 'react'; const TableExample9Demo = () => ( <> {/* Special Feature: Product Catalog (Embedded Inputs, Tags & Media) */}
Product
SKU
Category
Price (INR)
Stock
Wireless...
WH-1001 142
Organi...
GT-2045 580
Standi...
SD-3022 67
Runnin...
RS-4011 23
); export default TableExample9Demo; ``` Angular: ```html
Product
SKU
Category
Price (INR)
Stock
Wireless...
WH-1001 142
Organi...
GT-2045 580
Standi...
SD-3022 67
Runnin...
RS-4011 23
``` ### 10. Special Features — Action Cell Modes HTML: ```html
User Status Actions (Default Button) Actions (Overflow)
AK
Anika Kapoor
token Neutral
RJ
Rohan Joshi
token Neutral
PS
Priya Sharma
Away
MS
Meera Singh
Offline
``` React: ```jsx import React from 'react'; const TableExample10Demo = () => ( <> {/* Special Feature: Action Cell Modes */}
User Status Actions (Default Button) Actions (Overflow)
AK
Anika Kapoor
token Neutral
RJ
Rohan Joshi
token Neutral
PS
Priya Sharma
Away
MS
Meera Singh
Offline
); export default TableExample10Demo; ``` Angular: ```html
User Status Actions (Default Button) Actions (Overflow)
AK
Anika Kapoor
token Neutral
RJ
Rohan Joshi
token Neutral
PS
Priya Sharma
Away
MS
Meera Singh
Offline
``` ## Accessibility notes - Use semantic HTML and required ARIA attributes where the Storybook example shows them. - Ensure visible focus indicators and keyboard operability. - Test color contrast against WCAG 2.1 AA.