@atomico/table

Webcomponent built with Atomico JS, Simple to use and customize table. Includes additional support for React and Preact.

Modules

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>

Custom properties

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"

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"

Properties Table

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.

Properties Tr

sticky: boolan,The table row will set its position according to the scroll position

The following properties are automatically defined by the component to declare state.

td: array ,list of Td nodes associated with the TR component

collapse: boolean, property defined according to the state of the parent.

last: last row of the table

Properties Td

width: string, cell width.

Examples

React

Previous@atomico/lottie Next@atomico/react

Last updated 2 years ago

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"