table-saw

KO | EN

gitlite — search

#javascript #hacktoberfest #golang #go #android #machine-learning #docker #nodejs #awesome #cli #kubernetes #security #openai #ios

(★ 337)

A small web component for responsive <table> elements.

File Explorer

Download Latest Version (.zip)

.gitignore
demo.html
LICENSE
package.json
README.md
table-saw.js

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# `table-saw`

A small structural-only zero-dependency Web Component for responsive `<table>` elements. Heavily inspired by [Filament Group’s Tablesaw Stack jQuery plugin](https://github.com/filamentgroup/tablesaw).

## [Demo](https://zachleat.github.io/table-saw/demo.html)

## Examples

```html

<script type="module" src="table-saw.js"></script>

<table-saw>
	<table></table>
</table-saw>

<table-saw breakpoint="(max-width: 24.9375em)">
	<table></table>
</table-saw>

<table-saw ratio="1/1">
	<table></table>
</table-saw>

<table-saw zero-padding>
	<table></table>
</table-saw>

<table-saw text-align>
	<table></table>
</table-saw>

<table-saw text-align="right">
	<table></table>
</table-saw>
```

* Use `breakpoint` attribute to set the breakpoint (default:`(max-width: 39.9375em)`).
* Use `type="container"` attribute to use container queries instead of viewport-based media queries (default: `type="media"`).
* Use `ratio` attribute to override the small viewport column ratio (default: `1/2`).
* Use `zero-padding` attribute to remove small viewport padding on table cells.
* Use `text-align` attribute to force column text alignment at small viewport.

## Installation

You have a few options (choose one of these):

1. Install via [npm](https://www.npmjs.com/package/@zachleat/table-saw): `npm install @zachleat/table-saw`
1. [Download the source manually from GitHub](https://github.com/zachleat/table-saw/tags) into your project.
1. Skip this step and use the script directly via a 3rd party CDN (not recommended for production use)

### Usage

Make sure you include the `<script>` in your project (choose one of these):

```html

<script type="module" src="table-saw.js"></script>
```

```html

<script type="module" src="https://www.unpkg.com/@zachleat/table-saw@1.0.2/table-saw.js"></script>
```

```html

<script type="module" src="https://esm.sh/@zachleat/table-saw@1.0.2"></script>
```

## Features

* Supports one or many `<table>` child elements.
* Works with viewport media queries or container queries.
* Uses CSS grid for small viewport alignment.
* Falls back to regular table before or without JavaScript.
* Cuts the mustard on [`CSSStyleSheet.prototype.replaceSync`](https://caniuse.com/mdn-api_cssstylesheet_replacesync)

table-saw

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

table-saw

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

Download README