<pg-tablewrap>

Features

• Progressively enhances the default <table> element.
• Serves primarily as a wrapper element - other children elements are allowed - allowing for the addition of other elements to the overflowing region without an additional wrapper element.
• Enforces definition of an accessible name for the overflowing region.

Usage

Download JS file

Conditionally load the JavaScript only if the <pg-tablewrap> is present on the page at load:

if (document.querySelectorAll('pg-tablewrap').length) import('./tablewrap.min.js');

Load the script as a module in WordPress:

wp_enqueue_script_module( 'pg-tablewrap', get_theme_file_uri( 'js/pg-tablewrap.min.js' ), [], filemtime( get_theme_file_path( 'js/pg-tablewrap.min.js' ) ) );

Content

Required content

<table> element

Permitted content

Flow content (though this is unlikely to be desirable)

Attributes

Properties

No public properties are exposed by this component.

Events

No custom events are dispatched by this component.

Style

No additional CSS is required beyond that called for by the overall page design.

Do note that in order to properly overflow, the region is given a style of position: relative, which will create a stacking context.

Examples

pg-tablewrap {
	background-attachment: local, local, scroll, scroll;
	background-image:
		linear-gradient(to right, #fff 30%, rgb(255 255 255 / 0)),
		linear-gradient(to right, rgb(255 255 255 / 0), #fff 70%),
		radial-gradient(farthest-side at 0% 50%, rgb(0 0 0 / .2), rgb(0 0 0 / 0)),
		radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / .2), rgb(0 0 0 / 0));
	background-position: 0 0, 100% 50%, 0 0, 100% 50%;
	background-repeat: no-repeat;
	background-size: 2.5rem 100%, 2.5rem 100%, 1rem 100%, 1rem 100%;
}

Tests