Table

The Table component offers a minimal semantic wrapper (thead, tbody, tr, th, td) useful for simple static tabular data when the full DataTable is unnecessary.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/react-ui-library

Examples

⁽⁵⁾

Properties

⁽³⁰⁾

Playground

Data Prop

Pass a dataset to the data prop to render the caption, header, and body without composing subcomponents.

Loading demo…

import
 
{
 
Block
,
 
Table
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
import
 
{
 data 
}
 
from
 
'./data'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Block
>
      
<Text
 
size
=
"sm"
 
color
=
"secondary"
>
        
Provide
 the 
`data`
 prop to render the caption
,
 header
,
 and body automatically
.
      
</Text
>
      
<Table
 
data
=
{
data
}
 withTableBorder fullWidth 
/>
    
</Block
>
  
)
;
}

Border Options

Enable withTableBorder, withColumnBorders, and withRowBorders to emphasize cell boundaries.

Loading demo…

import
 
{
 
Block
,
 
Table
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
import
 
{
 data 
}
 
from
 
'./data'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Block
>
      
<Text
 
size
=
"sm"
 
color
=
"secondary"
>
        
Combine
 table
,
 column
,
 and row borders to separate dense numeric data
.
      
</Text
>
      
<Table
        
data
=
{
data
}
        withTableBorder
        withColumnBorders
        withRowBorders
        striped
        fullWidth
      
/>
    
</Block
>
  
)
;
}

Manual Composition

Use the table subcomponents when you need custom cells, alignments, or dynamic rows beyond the data helper.

Loading demo…

import
 
{
 
Block
,
 
Chip
,
 
Table
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
import
 
{
 rows 
}
 
from
 
'./data'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Block
>
      
<Text
 
size
=
"sm"
 
color
=
"secondary"
>
        
Compose
 tables manually 
for
 rich cells
,
 spanning
,
 or custom headers
.
      
</Text
>
      
<Table
 withTableBorder fullWidth
>
        
<Table.Caption
>
Manually
 composed table with rich cell content
</Table.Caption
>
        
<Table.Thead
>
          
<Table.Tr
>
            
<Table.Th
>
Name
</Table.Th
>
            
<Table.Th
>
Stack
</Table.Th
>
            
<Table.Th
 
align
=
"center"
>
Status
</Table.Th
>
            
<Table.Th
 
align
=
"right"
>
Stars
</Table.Th
>
          
</Table.Tr
>
        
</Table.Thead
>
        
<Table.Tbody
>
          
{
rows
.
map
(
(
row
)
 
=>
 
(
            
<Table.Tr
 
key
=
{
row
.
name
}
>
              
<Table.Td
>
{
row
.
name
}
</Table.Td
>
              
<Table.Td
>
{
row
.
stack
}
</Table.Td
>
              
<Table.Td
 
align
=
"center"
>
                
<Chip
 
size
=
"xs"
 
color
=
{
row
.
status 
===
 
'stable'
 
?
 
'success'
 
:
 
'primary'
}
 
variant
=
"light"
>
                  
{
row
.
status
}
                
</Chip
>
              
</Table.Td
>
              
<Table.Td
 
align
=
"right"
 
widthStrategy
=
"min-content"
>
                
{
row
.
stars
.
toLocaleString
(
)
}
              
</Table.Td
>
            
</Table.Tr
>
          
)
)
}
        
</Table.Tbody
>
      
</Table
>
    
</Block
>
  
)
;
}

Horizontal Scroll

Use Table.ScrollContainer to clamp table width and let users horizontally scroll large matrices.

Loading demo…

import
 
{
 
Block
,
 
Table
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
import
 
{
 body
,
 columns 
}
 
from
 
'./data'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Block
>
      
<Text
 
size
=
"sm"
 
color
=
"secondary"
>
        
Wrap
 wide datasets in 
`Table.ScrollContainer`
 to enable horizontal scrolling
.
      
</Text
>
      
<Table.ScrollContainer
 
minW
=
{
900
}
>
        
<Table
          
data
=
{
{
 head
:
 columns
,
 body
,
 caption
:
 
'Wide matrix sample (scroll to explore)'
 
}
}
          withTableBorder
          striped
        
/>
      
</Table.ScrollContainer
>
    
</Block
>
  
)
;
}

Column Sizing

Define the columns array to set fixed widths, min widths, or flex growth for responsive tables.

Loading demo…

import
 
{
 
Block
,
 
Table
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
import
 
{
 columns
,
 data 
}
 
from
 
'./data'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Block
>
      
<Text
 
size
=
"sm"
 
color
=
"secondary"
>
        
Pass
 column sizing rules to control flex growth
,
 widths
,
 and minimums
.
      
</Text
>
      
<Table
 
data
=
{
data
}
 
columns
=
{
columns
}
 withTableBorder fullWidth 
/>
    
</Block
>
  
)
;
}

Scan to open this page on your phonereact-ui-library.com/components/Table

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

Components Charts Hooks

Docs

Getting Started Localization llms.txt

Resources

FAQ Changelog Accessibility Sitemap