---
title: "SSRM Changing Columns"
enterprise: true
framework: vue
version: "36.1.0"
---

# SSRM Changing Columns

Columns can be added and removed from the Server-Side Row Model without resetting the row model.

[Changing columns](https://www.ag-grid.com/vue-data-grid/column-updating-definitions/) allows you to specify new column definitions to the grid and the grid will work out which columns are new and which are old, keeping the state of the old columns.

For the Server-Side Row Model, this means a refresh will occur in the event of one of the following:

- A row group column is added, removed or changed
- A pivot column is added, removed or changed
- While row grouping is active, a new column has an aggregation applied or changed.
- Any change is applied to a columns sort direction, or a sorted column is changed, added or removed.

## Example Changing Columns

The example below demonstrates how changing columns impacts the server side row model. The following can be noted:

- Adding or removing Athlete, Age or Sport will not reload the data as they have no row group, pivot, value, sort or filter set.
- Adding or removing Country or Year will reload the data as they are part of the grouping.
- Removing Gold, Silver or Bronze will not reload the data. Adding Gold, Silver or Bronze will reload the data as they have aggregations applied.
- If you apply a sort or filter (on Athlete) and then remove the column the data will reload.

#### Changing Columns

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
  AutoGroupColumnDef,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  IServerSideDatasource,
  IServerSideGetRowsParams,
  ModuleRegistry,
  NumberFilterModule,
  RowModelType,
  SetFilterValuesFuncParams,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  RowGroupingModule,
  ServerSideRowModelModule,
  SetFilterModule,
} from "ag-grid-enterprise";
import { FakeServer } from "./fakeServer";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  NumberFilterModule,
  ColumnsToolPanelModule,
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
  ServerSideRowModelModule,
  SetFilterModule,
]);

const colDefCountry: ColDef = { field: "country", rowGroup: true };

const colDefYear: ColDef = { field: "year", rowGroup: true };

const colDefAthlete: ColDef = {
  field: "athlete",
  filter: "agSetColumnFilter",
  filterParams: {
    values: getAthletesAsync,
  },
  suppressHeaderMenuButton: true,
  suppressHeaderContextMenu: true,
};

const colDefAge: ColDef = { field: "age" };

const colDefSport: ColDef = { field: "sport" };

const colDefGold: ColDef = { field: "gold", aggFunc: "sum" };

const colDefSilver: ColDef = { field: "silver", aggFunc: "sum" };

const colDefBronze: ColDef = { field: "bronze", aggFunc: "sum" };

function getAthletesAsync(params: SetFilterValuesFuncParams) {
  const countries = fakeServer.getAthletes();
  // simulating real server call with a 500ms delay
  setTimeout(() => {
    params.success(countries);
  }, 500);
}

function getBooleanValue(cssSelector: string) {
  return (
    (document.querySelector(cssSelector) as HTMLInputElement).checked === true
  );
}

function getServerSideDatasource(server: any): IServerSideDatasource {
  return {
    getRows: (params: IServerSideGetRowsParams) => {
      console.log("[Datasource] - rows requested by grid: ", params.request);
      const response = server.getData(params.request);
      // adding delay to simulate real server call
      setTimeout(() => {
        if (response.success) {
          // call the success callback
          params.success({
            rowData: response.rows,
            rowCount: response.lastRow,
          });
        } else {
          // inform the grid request failed
          params.fail();
        }
      }, 200);
    },
  };
}

var fakeServer: any = undefined;

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="test-container">
      <div class="test-header">Select columns to show then hit 'Apply'</div>
      <div class="test-header">
        <label><input type="checkbox" id="athlete">Athlete</label>
        <label><input type="checkbox" id="age">Age</label>
        <label><input type="checkbox" id="country">Country</label>
        <label><input type="checkbox" id="year">Year</label>
        <label><input type="checkbox" id="sport">Sport</label>
        <label><input type="checkbox" id="gold">Gold</label>
        <label><input type="checkbox" id="silver">Silver</label>
        <label><input type="checkbox" id="bronze">Bronze</label>
        <button v-on:click="onBtApply()">Apply</button>
      </div>
      <ag-grid-vue
        style="width: 100%; height: 100%;"
        class="test-grid"
        @grid-ready="onGridReady"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :autoGroupColumnDef="autoGroupColumnDef"
        :maintainColumnOrder="true"
        :rowModelType="rowModelType"
        :suppressAggFuncInHeader="true"
        :rowData="rowData"></ag-grid-vue>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<ColDef[]>([
      colDefAthlete,
      colDefAge,
      colDefCountry,
      colDefYear,
      colDefSport,
      colDefGold,
      colDefSilver,
      colDefBronze,
    ]);
    const defaultColDef = ref<ColDef>({
      initialFlex: 1,
      minWidth: 120,
    });
    const autoGroupColumnDef = ref<AutoGroupColumnDef>({
      minWidth: 200,
    });
    const rowModelType = ref<RowModelType>("serverSide");
    const rowData = ref<IOlympicData[]>(null);

    function onBtApply() {
      const cols = [];
      if (getBooleanValue("#athlete")) {
        cols.push(colDefAthlete);
      }
      if (getBooleanValue("#age")) {
        cols.push(colDefAge);
      }
      if (getBooleanValue("#country")) {
        cols.push(colDefCountry);
      }
      if (getBooleanValue("#year")) {
        cols.push(colDefYear);
      }
      if (getBooleanValue("#sport")) {
        cols.push(colDefSport);
      }
      if (getBooleanValue("#gold")) {
        cols.push(colDefGold);
      }
      if (getBooleanValue("#silver")) {
        cols.push(colDefSilver);
      }
      if (getBooleanValue("#bronze")) {
        cols.push(colDefBronze);
      }
      gridApi.value!.setGridOption("columnDefs", cols);
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      (document.getElementById("athlete") as HTMLInputElement).checked = true;
      (document.getElementById("age") as HTMLInputElement).checked = true;
      (document.getElementById("country") as HTMLInputElement).checked = true;
      (document.getElementById("year") as HTMLInputElement).checked = true;
      (document.getElementById("sport") as HTMLInputElement).checked = true;
      (document.getElementById("gold") as HTMLInputElement).checked = true;
      (document.getElementById("silver") as HTMLInputElement).checked = true;
      (document.getElementById("bronze") as HTMLInputElement).checked = true;

      const updateData = (data) => {
        // setup the fake server with entire dataset
        fakeServer = new FakeServer(data);
        // create datasource with a reference to the fake server
        const datasource: IServerSideDatasource =
          getServerSideDatasource(fakeServer);
        // register the datasource with the grid
        params.api!.setGridOption("serverSideDatasource", datasource);
      };

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

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      autoGroupColumnDef,
      rowModelType,
      rowData,
      onGridReady,
      onBtApply,
    };
  },
});

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

[Live example: Changing Columns](https://www.ag-grid.com/examples/server-side-model-changing-columns/changing-columns/vue3)