---
title: "Excel Export - Data Protection"
enterprise: true
framework: vue
version: "36.1.0"
---

# Excel Export - Data Protection

Excel Export allows you to protect the exported worksheet so that users can only edit specific cells.

## Data Protection

Excel has two layers of protection:

1. **Cell Protection** controls whether a cell is *locked* and whether a formula is *hidden* (`ExcelStyle.protection`).
2. **Worksheet Protection** enables enforcement of the locked/unlocked cell states (`ExcelExportParams.protectSheet`).

> **Note**
>
> Cell locking only takes effect when the worksheet is protected. If you lock cells but do not enable worksheet protection, all cells will remain editable in Excel.

Enable worksheet protection by setting `protectSheet` in the [Excel Export Params](https://www.ag-grid.com/vue-data-grid/excel-export-api/#excelexportparams) (or in `defaultExcelExportParams`):

```ts
<ag-grid-vue
    :defaultExcelExportParams="defaultExcelExportParams"
    /* other grid options ... */>
</ag-grid-vue>

this.defaultExcelExportParams = {
    protectSheet: true
};
```

#### Excel Export - Data Protection (Default)

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  CsvExportModule,
  ExcelExportParams,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  NumberFilterModule,
  TextFilterModule,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  ExcelExportModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  TextFilterModule,
  NumberFilterModule,
  ClientSideRowModelModule,
  CsvExportModule,
  ExcelExportModule,
  ColumnMenuModule,
  ContextMenuModule,
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="container">
      <div class="controls">
        <button v-on:click="onBtExport()" style="margin-bottom: 5px; font-weight: bold">Export to Excel</button>
      </div>
      <div class="grid-wrapper">
        <ag-grid-vue
          style="width: 100%; height: 100%;"
          @grid-ready="onGridReady"
          :columnDefs="columnDefs"
          :defaultColDef="defaultColDef"
          :defaultExcelExportParams="defaultExcelExportParams"
          :rowData="rowData"></ag-grid-vue>
        </div>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "athlete", minWidth: 200 },
      { field: "country", minWidth: 180 },
      { field: "sport", minWidth: 150 },
      { field: "gold", width: 100 },
      { field: "silver", width: 100 },
      { field: "bronze", width: 100 },
      { field: "total", width: 100 },
    ]);
    const defaultColDef = ref<ColDef>({
      filter: true,
      minWidth: 100,
      flex: 1,
    });
    const defaultExcelExportParams = ref<ExcelExportParams>({
      protectSheet: true,
    });
    const rowData = ref<IOlympicData[]>(null);

    function onBtExport() {
      gridApi.value!.exportDataAsExcel();
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => {
        rowData.value = data;
      };

      fetch("https://www.ag-grid.com/example-assets/small-olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      defaultExcelExportParams,
      rowData,
      onGridReady,
      onBtExport,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

[Live example: Excel Export - Data Protection (Default)](https://www.ag-grid.com/examples/excel-export-data-protection/excel-export-data-protection-default/vue3)

## Worksheet Custom Protection

To allow specific actions, or to require a password to unprotect the sheet, provide an `ExcelSheetProtection` config object:

```ts
<ag-grid-vue
    :defaultExcelExportParams="defaultExcelExportParams"
    /* other grid options ... */>
</ag-grid-vue>

this.defaultExcelExportParams = {
    protectSheet: {
        password: 'secret',
        autoFilter: true,
        formatCells: true
    }
};
```

#### Excel Export - Data Protection (Custom Sheet Protection)

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  CsvExportModule,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  NumberFilterModule,
  TextFilterModule,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  ExcelExportModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  TextFilterModule,
  NumberFilterModule,
  ClientSideRowModelModule,
  CsvExportModule,
  ExcelExportModule,
  ColumnMenuModule,
  ContextMenuModule,
]);

const isChecked = (selector: string): boolean =>
  document.querySelector<HTMLInputElement>(selector)?.checked ?? false;

const getInputValue = (selector: string): string =>
  document.querySelector<HTMLInputElement>(selector)?.value ?? "";

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="container">
      <div class="controls">
        <label class="option">
          Worksheet password (optional):
          <input type="text" id="worksheetPassword" value="secret">
          </label>
          <label class="option">
            <input type="checkbox" id="allowAutoFilter">
              Allow filtering (autoFilter)
            </label>
            <label class="option">
              <input type="checkbox" id="allowFormatCells">
                Allow formatting cells (formatCells)
              </label>
              <button v-on:click="onBtExport()" style="margin-bottom: 5px; font-weight: bold">Export to Excel</button>
            </div>
            <div class="grid-wrapper">
              <ag-grid-vue
                style="width: 100%; height: 100%;"
                @grid-ready="onGridReady"
                :columnDefs="columnDefs"
                :defaultColDef="defaultColDef"
                :rowData="rowData"></ag-grid-vue>
              </div>
            </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "athlete", minWidth: 200 },
      { field: "country", minWidth: 180 },
      { field: "sport", minWidth: 150 },
      { field: "gold", width: 100 },
      { field: "silver", width: 100 },
      { field: "bronze", width: 100 },
      { field: "total", width: 100 },
    ]);
    const defaultColDef = ref<ColDef>({
      filter: true,
      minWidth: 100,
      flex: 1,
    });
    const rowData = ref<IOlympicData[]>(null);

    function onBtExport() {
      const password = getInputValue("#worksheetPassword").trim() || undefined;
      const autoFilter = isChecked("#allowAutoFilter");
      const formatCells = isChecked("#allowFormatCells");
      gridApi.value!.exportDataAsExcel({
        protectSheet: {
          password,
          autoFilter,
          formatCells,
        },
      });
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => {
        rowData.value = data;
      };

      fetch("https://www.ag-grid.com/example-assets/small-olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      rowData,
      onGridReady,
      onBtExport,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

[Live example: Excel Export - Data Protection (Custom Sheet Protection)](https://www.ag-grid.com/examples/excel-export-data-protection/excel-export-data-protection-custom/vue3)

> **Note**
>
> Excel uses an obfuscation algorithm for worksheet protection passwords. It should not be treated as strong security.

## Unlocking Cells

When worksheet protection is enabled, all exported cells are locked by default. To unlock specific cells or columns, configure an Excel style with `protection.protected = false` and apply that style via `cellClass` / `cellClassRules`:

```ts
<ag-grid-vue
    :columnDefs="columnDefs"
    :excelStyles="excelStyles"
    :defaultExcelExportParams="defaultExcelExportParams"
    /* other grid options ... */>
</ag-grid-vue>

this.columnDefs = [
    { field: 'athlete', cellClass: 'unlocked' },
    { field: 'country', cellClass: 'unlocked' }
];
this.excelStyles = [
    {
        id: 'unlocked',
        protection: { protected: false, hideFormula: false }
    }
];
this.defaultExcelExportParams = {
    protectSheet: true
};
```

#### Excel Export - Data Protection (Unlocking Cells)

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
  CellStyleModule,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  CsvExportModule,
  ExcelExportParams,
  ExcelStyle,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  NumberFilterModule,
  TextEditorModule,
  TextFilterModule,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  ExcelExportModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  CellStyleModule,
  TextFilterModule,
  TextEditorModule,
  NumberFilterModule,
  ClientSideRowModelModule,
  CsvExportModule,
  ExcelExportModule,
  ColumnMenuModule,
  ContextMenuModule,
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="container">
      <div class="controls">
        <button v-on:click="onBtExport()" style="margin-bottom: 5px; font-weight: bold">Export to Excel</button>
      </div>
      <div class="grid-wrapper">
        <ag-grid-vue
          style="width: 100%; height: 100%;"
          @grid-ready="onGridReady"
          :excelStyles="excelStyles"
          :columnDefs="columnDefs"
          :defaultColDef="defaultColDef"
          :defaultExcelExportParams="defaultExcelExportParams"
          :rowData="rowData"></ag-grid-vue>
        </div>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const excelStyles = ref<ExcelStyle[]>([
      {
        id: "unlocked",
        interior: {
          color: "#C6EFCE",
          pattern: "Solid",
        },
        protection: {
          protected: false,
          hideFormula: false,
        },
      },
    ]);
    const columnDefs = ref<(ColDef | ColGroupDef)[]>([
      {
        headerName: "Editable (Unlocked)",
        children: [
          {
            field: "athlete",
            minWidth: 200,
            cellClass: "unlocked",
            editable: true,
          },
          {
            field: "country",
            minWidth: 200,
            cellClass: "unlocked",
            editable: true,
          },
        ],
      },
      {
        headerName: "Read Only (Locked)",
        children: [
          { field: "sport", minWidth: 150 },
          { field: "gold" },
          { field: "silver" },
          { field: "bronze" },
          { field: "total" },
        ],
      },
    ]);
    const defaultColDef = ref<ColDef>({
      filter: true,
      minWidth: 100,
      flex: 1,
    });
    const defaultExcelExportParams = ref<ExcelExportParams>({
      protectSheet: true,
    });
    const rowData = ref<IOlympicData[]>(null);

    function onBtExport() {
      gridApi.value!.exportDataAsExcel();
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => {
        rowData.value = data;
      };

      fetch("https://www.ag-grid.com/example-assets/small-olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      excelStyles,
      columnDefs,
      defaultColDef,
      defaultExcelExportParams,
      rowData,
      onGridReady,
      onBtExport,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

[Live example: Excel Export - Data Protection (Unlocking Cells)](https://www.ag-grid.com/examples/excel-export-data-protection/excel-export-unlocking-cells/vue3)

## Interfaces

### ExcelExportParams

```ts
interface ExcelExportParams {
    // ...
    protectSheet?: boolean | ExcelSheetProtection;
}
```

### ExcelSheetProtection

Properties available on the `ExcelSheetProtection` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `autoFilter` | `boolean` |  | `false` | Allow using AutoFilter when worksheet protection is enabled. |
| `deleteColumns` | `boolean` |  | `false` | Allow deleting columns when worksheet protection is enabled. |
| `deleteRows` | `boolean` |  | `false` | Allow deleting rows when worksheet protection is enabled. |
| `formatCells` | `boolean` |  | `false` | Allow formatting cells when worksheet protection is enabled. |
| `formatColumns` | `boolean` |  | `false` | Allow formatting columns when worksheet protection is enabled. |
| `formatRows` | `boolean` |  | `false` | Allow formatting rows when worksheet protection is enabled. |
| `insertColumns` | `boolean` |  | `false` | Allow inserting columns when worksheet protection is enabled. |
| `insertHyperlinks` | `boolean` |  | `false` | Allow inserting hyperlinks when worksheet protection is enabled. |
| `insertRows` | `boolean` |  | `false` | Allow inserting rows when worksheet protection is enabled. |
| `pivotTables` | `boolean` |  | `false` | Allow using PivotTables when worksheet protection is enabled. |
| `selectLockedCells` | `boolean` |  | `true` | Allow selecting locked cells when worksheet protection is enabled. |
| `selectUnlockedCells` | `boolean` |  | `true` | Allow selecting unlocked cells when worksheet protection is enabled. |
| `password` | `string` |  |  | Optional password required to unprotect the worksheet. |

### ExcelStyle

```ts
interface ExcelStyle {
    // ...
    protection?: ExcelProtection;
}
```

### ExcelProtection

Properties available on the `ExcelProtection` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `protected` | `boolean` |  | `true` | Set to `false` to disable cell protection (locking) |
| `hideFormula` | `boolean` |  | `false` | Set to `true` to hide formulas within protected cells. |