@atomico/table
Webcomponent built with Atomico JS, Simple to use and customize table. Includes additional support for React and Preact.
Default
Elements
React
Preact
Html CDN
import { Table, Tr, Td } from "@atomico/table";
// Import that does not associate the tagName by default
import { Table, Tr, Td } from "@atomico/table/elements";
import { Table, Tr, Td } from "@atomico/table/react";
import { Table, Tr, Td } from "@atomico/table/preact";
<script
type="module"
src="http://esm.sh/@atomico/table"></script>
<atomico-table></atomico-table>
Global | Description |
|---|---|
--table--radius | table borde-radius |
--table--background | table background |
--table--border | table borde |
--table--border-split | border dividing cells |
--table--row-gap | row spacing |
--table--row-radius | row border-radius |
--table--row-shadow | row box-shadow |
--table--row-background | row background |
--table--row-header-radius | border-radius of the row declared as slot="header" |
--table--row-header-shadow | box-shadow of the row declared as slot="header" |
--table--row-header-background | background of the row declared as slot="header" |
--table--row-last-radius | borde-radius de la ultima fila |
--table--cell-align | cell alignment, default middle |
--table--cell-padding | cell padding |
--table--cell-header-padding | padding of the cell inside the Tr declared as slot="header" |
collapse:
boolean, collapses the rows of the table, if breakpoint is defined the component will automatically define this props when detecting the match with breakpoint.breakpoint:
string, media query to observe to copal the table.sticky:
boolan,The table row will set its position according to the scroll positionThe following properties are automatically defined by the component to declare state.
td:
array ,list of Td nodes associated with the TR componentcollapse:
boolean, property defined according to the state of the parent.last: last row of the table
width: string, cell width.
React
Last modified 7mo ago