@w0s/table-cell-ditto NPM

Display table cells with ditto mark

Demo

Demo page

Examples

<script type="importmap">
  {
    "imports": {
      "@w0s/table-cell-ditto": "...",
      "text-metrics": "..."
    }
  }
</script>
<script type="module">
  import TableCellDitto from '@w0s/table-cell-ditto';

  for (const tableElement of document.querySelectorAll('.js-table-cell-ditto')) {
    const tableCellDitto = new TableCellDitto(tableElement, {
      mark: '"',
      th: true,
    });
    tableCellDitto.convert();
  }
</script>

<table class="js-table-cell-ditto">
  <thead>
    <tr>
      <th>header cell</th>
      <th>header cell</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>header cell</th>
      <td>data cell</td>
    </tr>
    <tr>
      <th>header cell</th>
      <td>data cell</td> <!-- This cell is replaced with an ditto mark -->
    </tr>
  </tbody>
</table>

NG cases

Complex tables are not supported.

NG case	Code example
Horizontal joins by `colspan` attribute(`rowspan` attribute is supported)	`<td colspan="2">cell</td>`
Cells with `title` attribute(it will be overwritten by this function)	`<td title="Cell title">cell</td>`
Table with different font sizes for different cells	`<td style="font-size:16px">cell</td><td style="font-size:20px">cell</td>`
Table with `<th>` element columns not uniformly positioned	`<tr><th></th><td></td><td></td></tr><tr><th></th><th></th><td></td></tr>`

Constructor

new TableCellDitto(
  thisElement: HTMLTableElement,
  options?: Option
)

Parameters

Methods

text-metrics

4.0.1

1 year ago

4.0.0

1 year ago