1.0.5 • Published 2 years ago

react-table-to-excel v1.0.5

Weekly downloads
-
License
ISC
Repository
-
Last release
2 years ago

React table to Excel 2

'Экспортируйте HTML таблицу в Excel Ддокумент'. Модуль использует бибилотеку exceljs/exceljs для создания Excel документа.

Установка

Браузер

Добавьте код:

<script type="text/javascript" src="../dist/tableToExcel.js"></script>

Node

npm i react-table-to-excel
import TableToExcel from "react-table-to-excel";

Usage

Создайте HTML таблицу.
To export content of table #table1 run:

TableToExcel.convert(document.getElementById("table1"));

or

TableToExcel.convert(document.getElementById("table1"), {
  name: "table1.xlsx",
  sheet: {
    name: "Sheet 1"
  }
});

Check this pen for working example.

Cell Types

Cell types can be set using the following data attributes:

AttributeDescriptionPossible Values
data-tTo specify the data type of a cells : String (Default) n : Number b : Boolean d : Date
data-hyperlinkTo add hyper link to cellExternal URL or hyperlink to another sheet
data-errorTo add value of a cell as error

Example:

<!-- for setting a cell type as number -->
<td data-t="n">2500</td>
<!-- for setting a cell type as date -->
<td data-t="d">05-23-2018</td>
<!-- for setting a cell type as boolean. String "true/false" will be accepted as Boolean-->
<td data-t="b">true</td>
<!-- for setting a cell type as boolean using integer. 0 will be false and any non zero value will be true -->
<td data-t="b">0</td>
<!-- For adding hyperlink -->
<td data-hyperlink="https://google.com">Google</td>

Cell Styling

All styles are set using data attributes on td tags. There are 5 types of attributes: data-f-*, data-a-*, data-b-*, data-fill-* and data-num-fmt which corresponds to five top-level attributes font, alignment, border, fill and numFmt.

CategoryAttributeDescriptionValues
fontdata-f-nameFont name"Calibri" ,"Arial" etc.
data-f-szFont size"11" // font size in points
data-f-colorFont colorA hex ARGB value. Eg: FFFFOOOO for opaque red.
data-f-boldBoldtrue or false
data-f-italicItalictrue or false
data-underlineUnderlinetrue or false
data-f-strikeStriketrue or false
Alignmentdata-a-hHorizontal alignmentleft, center, right, fill, justify, centerContinuous, distributed
data-a-vVertical alignmentbottom, middle, top, distributed, justify
data-a-wrapWrap texttrue or false
data-a-indentIndentInteger
data-a-rtlText direction: Right to Lefttrue or false
data-a-text-rotationText rotation0 to 90
-1 to -90
vertical
Borderdata-b-a-sBorder style (all borders)Refer BORDER_STYLES
data-b-t-sBorder top styleRefer BORDER_STYLES
data-b-b-sBorder bottom styleRefer BORDER_STYLES
data-b-l-sBorder left styleRefer BORDER_STYLES
data-b-r-sBorder right styleRefer BORDER_STYLES
data-b-a-cBorder color (all borders)A hex ARGB value. Eg: FFFFOOOO for opaque red.
data-b-t-cBorder top colorA hex ARGB value.
data-b-b-cBorder bottom colorA hex ARGB value.
data-b-l-cBorder left colorA hex ARGB value.
data-b-r-cBorder right colorA hex ARGB value.
Filldata-fill-colorCell background colorA hex ARGB value.
numFmtdata-num-fmtNumber Format"0"
"0.00%"
"0.0%" // string specifying a custom format
"0.00%;\(0.00%\);\-;@" // string specifying a custom format, escaping special characters

BORDER_STYLES: thin, dotted, dashDot, hair, dashDotDot, slantDashDot, mediumDashed, mediumDashDotDot, mediumDashDot, medium, double, thick

Exclude Cells and rows

To exclude a cell or a row from the exported excel add data-exclude="true" to the corresponding td or tr.
Example:

<!-- Exclude entire row -->
<tr data-exclude="true">
  <td>Excluded row</td>
  <td>Something</td>
</tr>

<!-- Exclude a single cell -->
<tr>
  <td>Included Cell</td>
  <td data-exclude="true">Excluded Cell</td>
  <td>Included Cell</td>
</tr>

Column Width

Column width's can be set by specifying data-cols-width in the <table> tag. data-cols-width accepts comma separated column widths specified in character count . data-cols-width="10,20" will set width of first coulmn as width of 10 charaters and second column as 20 characters wide.
Example:

<table data-cols-width="10,20,30">
  ...
</table>

Row Height

Row Height can be set by specifying data-height in the <tr> tag.
Example:

<tr data-height="42.5">
  <td>Cell 1</td>
  <td>Cell 2</td>
</tr>

Release Changelog

1.0.0

1.0.2

  • Добавлена поддержка чисел с разрядностью
  • Обновлены зависимости

1.0.3

  • Исправления ошибок

1.0.5

  • Исправления ошибок
1.0.5

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago