# table-responsive

> adapts a table to a responsive format that can be viewed on small screens (mobile)

Latest version **1.0.4** (published 2024-09-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install table-responsive
pnpm add table-responsive
yarn add table-responsive
bun add table-responsive
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2024-09-27 |
| First published | 2021-11-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 34.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Dan Zelisko |
| Maintainers | danielzzz |
| Keywords | html, table, responive, css |

## Links

- npm: https://www.npmjs.com/package/table-responsive
- Repository: https://github.com/danielzzz/table-responsive
- Homepage: https://github.com/danielzzz/table-responsive#readme
- Issues: https://github.com/danielzzz/table-responsive/issues
- npm.io page: https://npm.io/package/table-responsive

## Dependencies (1)

- [jest](https://npm.io/package/jest.md) ^27.3.1

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 1.0.4 (latest) — 2024-09-27
- 1.0.2 — 2021-11-21
- 1.0.1 — 2021-11-21

## README

# Tailwind Table Responsive

![flujo de trabajo de ejemplo](https://github.com/danielzzz/tailwind-table-responsive/actions/workflows/npm-build.yml/badge.svg)  

adapts a table to a responsive format that can be viewed on small screens (mobile)  
Initially it works with Tailwind CSS but can be adapted to any other framework

big screen table
![](example/big-screen.png)

small screen - data is aligned vertically  
![](example/small-screen.png)

## How it works

- it scans the page for tables according to a given selector (default table.adaptToMobile)
- Add a <span> tag in each td cell with the name of the related <th> header
- Adds a class so you can use a media query to display a better looking table on smaller screens
- by default it's configured to work with tailwind css, but it can be easily adapted to any other library


## Usage

Download the library and insert along with the css file it into your page 
```
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
<script src="/dist/table-responsive.min.js"></script>
```
Enable it after the page is loaded
```
const config = {
    // default table selector
    tables: document.querySelectorAll('table.adaptToMobile'), 
    // default classes that are added to the element 
    classes: ["inline-block", "sm:hidden", "w-1/4", "font-bold"], 
}
adaptTableToMobile(config);
```

---
_Source: https://npm.io/package/table-responsive · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._