Skip to main content

Files

Active Table supports the following file formats: csv, xls, xlsx, ods, txt. You can import or export files via the use of buttons, methods or using drag and drop. You can additionally copy data from an external spreadsheet and paste it into the table directly.

info

csv is supported natively, however if you are using any of the other file formats - you will need to add the xlsx module into your project. Please see examples here.

files​

buttons is an array containing button definitions.
dragAndDrop is used to configure the drag and drop functionality. If any of the buttons use the import property, it automatically defaults to true. 

<active-table files='{"buttons": [{"import": true}, {"export": true}], "dragAndDrop": true}'></active-table>

Types​

Object types for properties inside files:

FileButton​

This object requires either the import or export properties to be defined.
text is the text that is displayed on the button.
styles is the definition of button style for various mouse events.
position is the location of the button.
order is the order of the button when multiple other components are also placed in the same position.

Example​

<active-table
  files='{
    "buttons": [
      {
        "import": true,
        "styles": {
          "default": {
            "backgroundColor": "#46acff", "height": "19px", "padding": "7px 14px", "color": "white", "border": "unset"
          },
          "hover": {"backgroundColor": "#2b9cf8"}, "click": {"backgroundColor": "#198eef"}
        },
        "text": "Import File",
        "position": "top-left",
        "order": 1
      },
      {
        "export": true,
        "styles": {
          "default": {
            "backgroundColor": "#46acff", "height": "19px", "padding": "7px 14px", "color": "white", "border": "unset"
          },
          "hover": {"backgroundColor": "#2b9cf8"}, "click": {"backgroundColor": "#198eef"}
        },
        "text": "Export File",
        "position": "top-left",
        "order": 0
      }
    ]}'
></active-table>

DragAndDrop​

Configuration for the drag and drop functionality.
overlayStyle is used to customise the overlay element that is displayed when a file is dragged over the table.
If the formats array inside ImportOptions is not set or is empty, it will automatically use all formats defined in the import buttons (if there are two import buttons where one accepts "csv" and another accepts "xlsx", the result will be ["csv", "xlsx"]), however if there are no import buttons this property will be set to ["csv"].

Example​

<active-table
  files='{
    "dragAndDrop": {
      "overlayStyle": {"backgroundColor": "#80ff704d", "border": "5px dashed #52c360"},
      "formats": ["csv", "xlsx"],
      "overwriteOptions": {"importRowStartIndex": 1, "tableRowStartIndex": 1}
  }}'
></active-table>
info

The overlay will appear for any file format as the component cannot inspect the file that is being dragged, but it will not process file formats that are not in the formats array after they are dropped.

ImportOptions​

Configuration for the importable files.
formats are file extensions that are allowed to be imported. If the array is not set or is empty - it will default to ["csv"].
overwriteOptions defines the content that the imported file will overwrite.

Example​

<active-table
  files='{
    "buttons": [
      {
        "import": {
          "formats": ["csv", "ods", "txt"],
          "overwriteOptions": {"importRowStartIndex": 1, "tableRowStartIndex": 1}
        }
      },
      {
        "import": {
          "formats": ["xls", "xlsx"],
          "overwriteOptions": {"importRowStartIndex": 2, "tableRowStartIndex": 2}
        }
      }
  ]}'
></active-table>

ImportOverwriteOptions​

  • Type: {importRowStartIndex?: number, tableRowStartIndex?: number}
  • Default: {importRowStartIndex: 0, tableRowStartIndex: 0}

Configuration for defining which imported file's rows will be used to overwrite which table rows. Both properties use zero based indexes where the first row is represented by 0.
importRowStartIndex property is the imported file's starting row index that will be used to overwrite the table. E.g. a value of 1 indicates that it will only use rows below the header.
tableRowStartIndex property marks the starting row of the data that will be completely removed and overwritten by the imported table rows. E.g. a value of 1 will overwrite all of the rows below the header row. Use a value of -1 to append the incoming table rows after the last existing row of the table.

Example​

<active-table
  files='{"buttons": [{"import": {"overwriteOptions": {"importRowStartIndex": 1, "tableRowStartIndex": -1}}}]}'
></active-table>

ExportOptions​

Configuration for the exported fileName and the available formats that it can be exported with.
When more than one format is defined - the button will use a dropdown to list each option.

Example​

<active-table
  files='{
    "buttons": [
      {"export": {"fileName": "example_csv", "formats": ["csv"]}},
      {"export": {"fileName": "example_xls", "formats": ["xls"]}},
      {"export": {"fileName": "example_xlsx", "formats": ["xlsx"]}},
      {"export": {"fileName": "example_ods", "formats": ["ods"]}},
      {"export": {"fileName": "example_txt", "formats": ["txt"]}},
      {"export": {"fileName": "example", "formats": ["csv", "xls", "xlsx", "ods", "txt"]}}
  ]}'
></active-table>

FileFormat​

  • Type: "csv" | "xls" | "xlsx" | "ods" | "txt"

File formats that can be imported into and exported out of Active Table.