@atomico/table

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

components/src/components/table at master · atomicojs/componentsGitHub

Modules

Default

import { Table, Tr, Td } from "@atomico/table";

Elements

// Import that does not associate the tagName by default
import { Table, Tr, Td } from "@atomico/table/elements";

React

import { Table, Tr, Td } from "@atomico/table/react";

Preact

import { Table, Tr, Td } from "@atomico/table/preact";

Html CDN

<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"

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

@atomico/table (React) - StackBlitzStackBlitz