Component documentation
SGUI / Development
Native tabular content with captions, scoped headers and alignment.
Loading examples…
Loading examples…
Loading examples…
No fixed SGUI child components.
No direct parents in the documented component catalog.
| Course | Lessons |
|---|---|
| Leadership | 12 |
| Communication | 8 |
| Total | 20 |
Native tabular content with captions, scoped headers and alignment.
| Course | Lessons |
|---|---|
| Leadership | 12 |
| Communication | 8 |
| Total | 20 |
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Table, TableCaption, TableHead, TableBody, TableFoot, TableRow, TableCell, TableHeaderCell, Stack, Typography, Button } from '@structured-growth/sg-ui/experimental';
export default function TablePlaygroundExample() {
const [action, setAction] = useState("No action yet");
const [open, setOpen] = useState(false);
const [page, setPage] = useState(0);
const [pageSize, setPageSize] = useState(25);
const [selected, setSelected] = useState("overview");
return (
<>
<ThemeScope density="comfortable">
<Table><TableCaption>{"Course catalog"}</TableCaption><TableHead><TableRow><TableHeaderCell>Course</TableHeaderCell><TableHeaderCell align={"start"}>Lessons</TableHeaderCell></TableRow></TableHead><TableBody><TableRow><TableHeaderCell scope="row">Leadership</TableHeaderCell><TableCell align={"start"}>12</TableCell></TableRow><TableRow><TableHeaderCell scope="row">Communication</TableHeaderCell><TableCell align={"start"}>8</TableCell></TableRow></TableBody><TableFoot><TableRow><TableCell>Total</TableCell><TableCell align={"start"}>20</TableCell></TableRow></TableFoot></Table>
</ThemeScope>
</>
);
}
The same props in independent density scopes.
| Course | Lessons |
|---|---|
| Leadership | 12 |
| Communication | 8 |
| Total | 20 |
| Course | Lessons |
|---|---|
| Leadership | 12 |
| Communication | 8 |
| Total | 20 |
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Table, TableCaption, TableHead, TableBody, TableFoot, TableRow, TableCell, TableHeaderCell, Stack, Typography, Button } from '@structured-growth/sg-ui/experimental';
export default function TablePlaygroundDensitiesExample() {
const [action, setAction] = useState("No action yet");
const [open, setOpen] = useState(false);
const [page, setPage] = useState(0);
const [pageSize, setPageSize] = useState(25);
const [selected, setSelected] = useState("overview");
return (
<>
<Stack gap={3}>
<ThemeScope density="compact"><Table><TableCaption>{"Course catalog"}</TableCaption><TableHead><TableRow><TableHeaderCell>Course</TableHeaderCell><TableHeaderCell align={"start"}>Lessons</TableHeaderCell></TableRow></TableHead><TableBody><TableRow><TableHeaderCell scope="row">Leadership</TableHeaderCell><TableCell align={"start"}>12</TableCell></TableRow><TableRow><TableHeaderCell scope="row">Communication</TableHeaderCell><TableCell align={"start"}>8</TableCell></TableRow></TableBody><TableFoot><TableRow><TableCell>Total</TableCell><TableCell align={"start"}>20</TableCell></TableRow></TableFoot></Table></ThemeScope>
<ThemeScope density="comfortable"><Table><TableCaption>{"Course catalog"}</TableCaption><TableHead><TableRow><TableHeaderCell>Course</TableHeaderCell><TableHeaderCell align={"start"}>Lessons</TableHeaderCell></TableRow></TableHead><TableBody><TableRow><TableHeaderCell scope="row">Leadership</TableHeaderCell><TableCell align={"start"}>12</TableCell></TableRow><TableRow><TableHeaderCell scope="row">Communication</TableHeaderCell><TableCell align={"start"}>8</TableCell></TableRow></TableBody><TableFoot><TableRow><TableCell>Total</TableCell><TableCell align={"start"}>20</TableCell></TableRow></TableFoot></Table></ThemeScope>
</Stack>
</>
);
}