# gridtable.css

> GridTable.css is simple way to create tables using custom DOM elements backed by the power of CSS Grid.

Latest version **1.0.0** (published 2022-10-19) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install gridtable.css
pnpm add gridtable.css
yarn add gridtable.css
bun add gridtable.css
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2022-10-19 |
| First published | 2022-09-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 13.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | Matthew Kennedy |
| Maintainers | matthewkennedy |
| Keywords | css, html, gridtable.css, gridtable.org, gridtable, gridtable |

## Links

- npm: https://www.npmjs.com/package/gridtable.css
- Repository: https://github.com/MatthewKennedy/gridtable.css
- Homepage: https://github.com/MatthewKennedy/gridtable.css#readme
- Issues: https://github.com/MatthewKennedy/gridtable.css/issues
- npm.io page: https://npm.io/package/gridtable.css

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2022-10-19
- 0.1.6 — 2022-09-24
- 0.1.5 — 2022-09-20
- 0.1.4 — 2022-09-19
- 0.1.3 — 2022-09-19
- 0.1.2 — 2022-09-19
- 0.1.1 — 2022-09-19
- 0.1.0 — 2022-09-19

## README

# GridTable.css

GridTable.css allows you to easily build responsive tables based on CSS Grid, all while bypassing the quirky table
behaviors everybody hates.


## Overview

- Allows you to set `<a href="some/link">Some Content</a>` as a table cell for better links.
- Wrap table rows with Rails / Hotwire tags without problems.
- Uses custom HTML DOM elements to cut down on css class stuffing.


# Installing

Add the tiny css file to your project or `yarn add gridtable.css` then import the css into your project.


# Usage

Create a table layout using the custom DOM elements provided, Notice that you can use `<a>` tags as table cells
giving a clickable cell without any of the quirky behavior you get with a standard `<table>`.

You can add the layout styling `style="grid-template-columns: 1fr 1fr 1fr 1fr;"` to the `<g-table>` element and it will be inherited by
all table rows, alternatively you can specify different layouts for the head and body by adding the styling to the `<g-thead>` or `<g-tbody>` as needed. If required you can also add the
styling directly to a row to enforce a row specific design.

See example below and more in the index.html file.

```html
<g-responsive> <!-- Wrap the table in the responsive tag -->

           <!--
           IMPORTANT: Set the cell format using CSS Grid Template Columns.
                      You can set this on the <g-table> tag, and it will be
                      inherited through the <g-head> and <g-body> rows. Alternatively
                      you can set this independently on the <g-thead> and <g-tbody> -->
  <g-table style="grid-template-columns: 1fr 1fr 1fr 1fr;">
    <g-thead>
      <g-tr>
        <g-th>Product</g-th>
        <g-th>Price</g-th>

              <!--
              NOTE: You can override the grid-column-template
                    telling a cell to span 2 columns -->
        <g-th style="grid-column: span 2;">State</g-th>
      </g-tr>
    </g-thead>
    <g-tbody>
      <g-tr>
        <g-td>Adidas FCraft</g-td>
        <g-td>$99.99</g-td>
        <g-td>Available</g-td>
        <g-td>Delete</g-td>
      </g-tr>

      <g-tr>
        <g-td>Adidas Ultra4D</g-td>
        <g-td>$199.99</g-td>
        <g-td>Available</g-td>
        <g-td>Delete</g-td>
      </g-tr>

      <g-tr>
        <g-td>Adidas UltraBoost</g-td>
        <g-td>$201.99</g-td>
        <g-td>Available</g-td>

        <!--
        NOTE: You can use <a> tags as table cells -->
        <a href="product/3/delete">Delete</a>
      </g-tr>

      <!--
      NOTE: These next rows are loaded in later via a turbo frame,
            and the table cell formatting is carried through fine. -->
      <turbo-frame id="some_id_1">
        <g-tr>
          <g-td>Nike Air</g-td>
          <g-td>$99.99</g-td>
          <g-td>Available</g-td>
          <g-td>Delete</g-td>
        </g-tr>

        <g-tr>
          <g-td>Nike Zoom</g-td>
          <g-td>$199.99</g-td>
          <g-td>Available</g-td>
          <g-td>Delete</g-td>
        </g-tr>
      </turbo-frame>
    </g-tbody>
  </g-table>
</g-responsive>
```

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