---
title: "au-widget-datasheet/au-widget-datasheet | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-datasheet.au-widget-datasheet/"
---

# au-widget-datasheet/au-widget-datasheet

> A widget that is used to display tables.

## Classes

### AuWidgetDataSheet

The following example illustrates how you can configure the editor, display a product preview, and create a table of variable fields.
```json
{
  "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%"
      }
    }
  ]
}
```

#### Extends

- [`AuBaseSelectorWidget`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#abstract-aubaseselectorwidget)

#### Implements

- [`IRestorableWidget`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.interface.IRestorableWidget.md#irestorablewidget)

#### Properties

##### params

```ts
params: IWidgetDataSheetConfig;
```

Properties of the widget.

###### Overrides

[`AuBaseSelectorWidget`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#abstract-aubaseselectorwidget).[`params`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#params)

##### selectedColumnIndex

```ts
selectedColumnIndex: number;
```

##### selectedRow

```ts
selectedRow: DataSheetRow;
```

The selected row.

##### selectedRowIndex

```ts
selectedRowIndex: number = 0;
```

The index of the selected row.

##### tableData

```ts
tableData: DataSheetRow[];
```

##### total

```ts
total: number = 1;
```

#### Accessors

##### \_

###### Get Signature

```ts
get _(): DataSheetRow;
```

Returns the selected row.

###### Returns

`DataSheetRow`

###### Overrides

[`AuBaseSelectorWidget`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#abstract-aubaseselectorwidget).[`_`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#_)

#### Methods

##### addRow()

```ts
addRow(): void;
```

add row to table

###### Returns

`void`

##### checkInitDependenciesWidgets()

```ts
checkInitDependenciesWidgets(): string[];
```

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

###### Returns

`string`[]

###### Inherited from

[`AuBaseSelectorWidget`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#abstract-aubaseselectorwidget).[`checkInitDependenciesWidgets`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#checkinitdependencieswidgets)

##### deleteRow()

```ts
deleteRow(): void;
```

delete selected row

###### Returns

`void`

##### exportWidgetData()

```ts
exportWidgetData(force): Promise<TableWidgetData>;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `force` | `boolean` |

###### Returns

`Promise`\<`TableWidgetData`\>

###### Implementation of

[`IRestorableWidget`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.interface.IRestorableWidget.md#irestorablewidget).[`exportWidgetData`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.interface.IRestorableWidget.md#exportwidgetdata)

##### getSelectedRowData()

```ts
getSelectedRowData<TFieldData>(): TFieldData[];
```

Gets selected row data with all column-associated data.

###### Type Parameters

| Type Parameter |
| ------ |
| `TFieldData` *extends* `DataSheetFieldData` |

###### Returns

`TFieldData`[]

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

##### getSelectedRowItemsData()

```ts
getSelectedRowItemsData(): IItemsData;
```

Gets 'ItemsData' from selected row.

###### Returns

`IItemsData`

##### getTableData()

```ts
getTableData<TFieldData>(): TFieldData[][];
```

Gets all row data with all associated data.

###### Type Parameters

| Type Parameter |
| ------ |
| `TFieldData` *extends* `DataSheetFieldData` |

###### Returns

`TFieldData`[][]

##### getTableItemsData()

```ts
getTableItemsData(): IItemsData[];
```

Gets 'ItemsData' from all table.

###### Returns

`IItemsData`[]

##### renderTable()

```ts
renderTable(): void;
```

Render table forcefully, hiding private tableService

###### Returns

`void`

##### resetPreloaderState()

```ts
resetPreloaderState(): void;
```

###### Returns

`void`

###### Inherited from

[`AuBaseSelectorWidget`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#abstract-aubaseselectorwidget).[`resetPreloaderState`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#resetpreloaderstate)

##### restoreWidgetFromData()

```ts
restoreWidgetFromData(widgetData, force): Promise<void>;
```

###### Parameters

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

###### Returns

`Promise`\<`void`\>

###### Implementation of

[`IRestorableWidget`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.interface.IRestorableWidget.md#irestorablewidget).[`restoreWidgetFromData`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.interface.IRestorableWidget.md#restorewidgetfromdata)

##### setErrors()

```ts
setErrors(errors): void;
```

Sets a table error.

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `errors` | `DataSheetCellError`[] |

###### Returns

`void`

##### showPreloader()

```ts
showPreloader(
   isPreload, 
   message?, 
   timeout?): void;
```

Shows a preloader.

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

###### Parameters

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

###### Returns

`void`

###### Inherited from

[`AuBaseSelectorWidget`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#abstract-aubaseselectorwidget).[`showPreloader`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#showpreloader)

##### showToast()

```ts
showToast(data?, duration?): void;
```

Shows a toast.

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

###### Parameters

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

###### Returns

`void`

###### Inherited from

[`AuBaseSelectorWidget`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#abstract-aubaseselectorwidget).[`showToast`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#showtoast)

## References

### widget

Renames and re-exports [AuWidgetDataSheet](#auwidgetdatasheet)