@aurigma/ui-framework/docs/reference/classes/auwidgetdatasheet.md

A platform which allows building print product personalization editors based on Aurigma's Customer's Canvas.

# Class: AuWidgetDataSheet

A widget that is used to display tables.

The following example illustrates how you can configure the editor, display a product preview, and create a table of variable fields.
```
{
  "widgets": [
    {
      "name": "canvas",
      "type": "canvas",
      "params": {
        "initial": { ... }
      }
    },
    {
      "name": "preview",
      "type": "image-carousel",
      "params": {
        "containerColor": "#ccc",
        "images": [{ "url": "{{$['editor'].proofImageUrls[0][0]}}" }]
      }
    },
    {
      "name": "table",
      "type": "datasheet",
      "params": {
        "data": "{{ $['canvas'].variableData }}"
      }
    }
  ],
  "steps": [
    {
      "name": "design",
      "title": "1. Design",
      "mainPanel": { "name": "canvas" }
    },
    {
      "name": "user data",
      "title": "2. Your data",
      "onActivate": [
        "{{ #function $['canvas'].saveProduct() }}",
        "{{ #function $['canvas'].getVariableData() }}"
      ],
      "mainPanel": { "name": "preview" },
      "bottomPanel": {
        "name": "table",
        "height": "50%"
      }
    }
  ]
}
```

## Hierarchy

  ↳ [AuBaseSelectorWidget](aubaseselectorwidget.md)

  ↳ **AuWidgetDataSheet**

## Implements

* [IWidget](../interfaces/iwidget.md)
* [IRestorableWidget](../interfaces/irestorablewidget.md)

## Index

### Properties

* [params](auwidgetdatasheet.md#params)
* [selectedColumnIndex](auwidgetdatasheet.md#selectedcolumnindex)
* [selectedRow](auwidgetdatasheet.md#selectedrow)
* [selectedRowIndex](auwidgetdatasheet.md#selectedrowindex)
* [tableData](auwidgetdatasheet.md#tabledata)
* [total](auwidgetdatasheet.md#total)

### Accessors

* [_](auwidgetdatasheet.md#_)

### Methods

* [addRow](auwidgetdatasheet.md#addrow)
* [changeFile](auwidgetdatasheet.md#changefile)
* [checkInitDependenciesWidgets](auwidgetdatasheet.md#checkinitdependencieswidgets)
* [deleteRow](auwidgetdatasheet.md#deleterow)
* [downloadXSLTFile](auwidgetdatasheet.md#downloadxsltfile)
* [exportWidgetData](auwidgetdatasheet.md#exportwidgetdata)
* [getSelectedRowData](auwidgetdatasheet.md#getselectedrowdata)
* [getTableData](auwidgetdatasheet.md#gettabledata)
* [openFileDialog](auwidgetdatasheet.md#openfiledialog)
* [renderTable](auwidgetdatasheet.md#rendertable)
* [resetPreloaderState](auwidgetdatasheet.md#resetpreloaderstate)
* [restoreWidgetFromData](auwidgetdatasheet.md#restorewidgetfromdata)
* [setErrors](auwidgetdatasheet.md#seterrors)
* [showPreloader](auwidgetdatasheet.md#showpreloader)
* [showToast](auwidgetdatasheet.md#showtoast)

## Properties

###  params

• **params**: *[IWidgetDataSheetConfig](../interfaces/iwidgetdatasheetconfig.md)*

*Implementation of [IWidget](../interfaces/iwidget.md).[params](../interfaces/iwidget.md#optional-params)*

*Overrides [AuBaseWidget](aubasewidget.md).[params](aubasewidget.md#params)*

Properties of the widget.

___

###  selectedColumnIndex

• **selectedColumnIndex**: *number*

___

###  selectedRow

• **selectedRow**: *[DataSheetRow](../README.md#datasheetrow)*

The selected row.

___

###  selectedRowIndex

• **selectedRowIndex**: *number* = 0

The index of the selected row.

___

###  tableData

• **tableData**: *[DataSheetRow](../README.md#datasheetrow)[]*

___

###  total

• **total**: *number* = 1

## Accessors

###  _

• **get _**(): *[DataSheetRow](../README.md#datasheetrow)*

*Overrides [AuBaseSelectorWidget](aubaseselectorwidget.md).[_](aubaseselectorwidget.md#_)*

Returns the selected row.

**Returns:** *[DataSheetRow](../README.md#datasheetrow)*

## Methods

###  addRow

▸ **addRow**(): *void*

add row to table

**Returns:** *void*

___

###  changeFile

▸ **changeFile**(`e`: Event): *Promise‹void›*

The `File` input handler.
 @ignore

**Parameters:**

Name | Type |
------ | ------ |
`e` | Event |

**Returns:** *Promise‹void›*

___

###  checkInitDependenciesWidgets

▸ **checkInitDependenciesWidgets**(): *string[]*

*Inherited from [AuBaseWidget](aubasewidget.md).[checkInitDependenciesWidgets](aubasewidget.md#checkinitdependencieswidgets)*

Returns an array of widget names, due to which the current widget cannot receive parameters.

**Returns:** *string[]*

___

###  deleteRow

▸ **deleteRow**(): *void*

 delete selected row

**Returns:** *void*

___

###  downloadXSLTFile

▸ **downloadXSLTFile**(): *void*

The `export` button handler.
 @ignore

**Returns:** *void*

___

###  exportWidgetData

▸ **exportWidgetData**(`force`: boolean): *Promise‹TableWidgetData›*

*Implementation of [IRestorableWidget](../interfaces/irestorablewidget.md)*

**Parameters:**

Name | Type |
------ | ------ |
`force` | boolean |

**Returns:** *Promise‹TableWidgetData›*

___

###  getSelectedRowData

▸ **getSelectedRowData**‹**TFieldData**›(): *TFieldData[]*

Gets selected row data with all column-associated data.

**Type parameters:**

▪ **TFieldData**: *[DataSheetFieldData](datasheetfielddata.md)*

**Returns:** *TFieldData[]*

An array of column values with all associated data of the selected row.

___

###  getTableData

▸ **getTableData**‹**TFieldData**›(): *TFieldData[][]*

Gets all row data with all associated data.

**Type parameters:**

▪ **TFieldData**: *[DataSheetFieldData](datasheetfielddata.md)*

**Returns:** *TFieldData[][]*

___

###  openFileDialog

▸ **openFileDialog**(): *void*

The `import` button handler.
 @ignore

**Returns:** *void*

___

###  renderTable

▸ **renderTable**(): *void*

Render table forcefully, hiding private tableService

**Returns:** *void*

___

###  resetPreloaderState

▸ **resetPreloaderState**(): *void*

*Inherited from [AuBaseWidget](aubasewidget.md).[resetPreloaderState](aubasewidget.md#resetpreloaderstate)*

**Returns:** *void*

___

###  restoreWidgetFromData

▸ **restoreWidgetFromData**(`widgetData`: TableWidgetData, `force`: boolean): *Promise‹void›*

**Parameters:**

Name | Type |
------ | ------ |
`widgetData` | TableWidgetData |
`force` | boolean |

**Returns:** *Promise‹void›*

___

###  setErrors

▸ **setErrors**(`errors`: [DataSheetCellError](datasheetcellerror.md)[]): *void*

Sets a table error.

**Parameters:**

Name | Type |
------ | ------ |
`errors` | [DataSheetCellError](datasheetcellerror.md)[] |

**Returns:** *void*

___

###  showPreloader

▸ **showPreloader**(`isPreload`: boolean, `message`: string | string[], `timeout`: number): *void*

*Inherited from [AuBaseWidget](aubasewidget.md).[showPreloader](aubasewidget.md#showpreloader)*

Shows a preloader.

```
"onClick": [
  "{{#function main.showPreloader(true, 'Creating print files...')}}",
  "{{#function $['editor'].getHiResImages(800,800)}}",
  "{{#function main.showPreloader(false)}}"
]
```

**Parameters:**

Name | Type | Default | Description |
------ | ------ | ------ | ------ |
`isPreload` | boolean | - | If `true`, enables the preloader. |
`message` | string | string[] |  [""] | A text message that appears next to the preloader.  |
`timeout` | number | 5 | - |

**Returns:** *void*

___

###  showToast

▸ **showToast**(`data?`: string, `duration?`: number): *void*

*Inherited from [AuBaseWidget](aubasewidget.md).[showToast](aubasewidget.md#showtoast)*

Shows a toast.

```
return editor.loadUserInfo(data)
    .catch(err => {
        this.widget.showToast("Error: Invalid data");
        console.log(err);
    });
```

**Parameters:**

Name | Type | Description |
------ | ------ | ------ |
`data?` | string | A string message to display in the toast. |
`duration?` | number | Defines how long to show the toast for.  |

**Returns:** *void*