Back to homepage

Conditional formatting

Use the conditional formatting feature to highlight important values and make your report look more personalized.

To apply conditional formatting

To implement your own logic of highlighting the data, follow the steps below:

1. On the Toolbar, choose the Format tab () > Conditional formatting.
2. Select the plus-sign icon.
3. Choose a value that you want to format (e.g., Sum of Price). If necessary, you can format all values at once.
4. Add a rule; for example, “Less than 100” will apply the changes to all the cells with a value less than 100.
5. Select colors for the text and background, and change the font if necessary.
6. Press the Apply button to see the changes on the grid.

You can add multiple conditions of formatting to the same measure. All of them are saved within a Conditional Format Object.

Our pivot table can easily be translated into different languages. This article describes the process of language localization for WebDataRocks reporting component.

Available localizations

• English (default)
• German
• Spanish
• Italian
• Brazilian Portuguese
• Chinese
• Turkish

Localization files for new languages can be added by creating a new pull request on GitHub. Our team highly appreciates any help.

Create a custom localization file

Follow the steps below to create your own localization file based on our template:

Step 1. Download template JSON file. It contains all labels that are used in WebDataRocks and English values for them.

Step 2. Translate values into the language you want.

For example, you want a Spanish localization. You start from replacing the first label-value pair from the template ("flatHierarchyBox": "Select and arrange columns") with its Spanish equivalent ("flatHierarchyBox": "Seleccionar y organizar columnas") and keep on the same way with the whole file (e.g., check Spanish translated sample).

Localize a specific report

To set a specific language for a report, add a report.localization property with the necessary localization:

const report = {
  dataSource: {
    filename: "https://cdn.webdatarocks.com/data/data.csv"
  },
  // Replace this file with your own localization file
  localization: "https://cdn.webdatarocks.com/loc/es.json"
};

const report = {
  dataSource: {
    filename: "https://cdn.webdatarocks.com/data/data.csv"
  },
  // Replace the translation below with your own labels
  localization: {
    toolbar: {
      connect: "Conectar",
      open: "Abierto",
      save: "Salvar",
      export: "Exportar",
      // Other labels
    }
  }
};

Set localization for all reports

If you want to set one language for all reports, add a global object with localization when initializing WebDataRocks:

<script setup>
  import { Pivot } from "@webdatarocks/vue-webdatarocks";
  import "@webdatarocks/webdatarocks/webdatarocks.css";

  const report = {
    // Your report
  };

  const globalReport = {
    // Replace this file with your own localization file
    localization: "https://cdn.webdatarocks.com/loc/es.json"
  };
</script>

<template>
  <div>
    <Pivot
      v-bind:report="report"
      v-bind:global="globalReport"
      toolbar
    />
  </div>
</template>

<script setup>
  import {Pivot} from "@webdatarocks/vue-webdatarocks";
  import "@webdatarocks/webdatarocks/webdatarocks.css";

  const report = {
    // Your report
  };

  const globalReport = {
    // Replace the translation below with your own labels
    localization: {
      toolbar: {
        connect: "Conectar",
        open: "Abierto",
        save: "Salvar",
        export: "Exportar",
        // Other labels
      }
    }
  };
</script>

<template>
  <div>
    <Pivot
      v-bind:report="report"
      v-bind:global="globalReport"
      toolbar
    />
  </div>
</template>

Learn more about the Global Object.

Our pivot table can easily be translated into different languages. This article describes the process of language localization for WebDataRocks reporting component.

Available localizations

• English (default)
• German
• Spanish
• Italian
• Brazilian Portuguese
• Chinese
• Turkish

Localization files for new languages can be added by creating a new pull request on GitHub. Our team highly appreciates any help.

Create a custom localization file

Follow the steps below to create your own localization file based on our template:

Step 1. Download template JSON file. It contains all labels that are used in WebDataRocks and English values for them.

Step 2. Translate values into the language you want.

For example, you want a Spanish localization. You start from replacing the first label-value pair from the template ("flatHierarchyBox": "Select and arrange columns") with its Spanish equivalent ("flatHierarchyBox": "Seleccionar y organizar columnas") and keep on the same way with the whole file (e.g., check Spanish translated sample).

Localize a specific report

To set a specific language for a report, add a report.localization property with the necessary localization:

report = {
  dataSource: {
    filename: "https://cdn.webdatarocks.com/data/data.csv"
  },
  // Replace this file with your own localization file
  localization: "https://cdn.webdatarocks.com/loc/es.json"
};

report = {
  dataSource: {
    filename: "https://cdn.webdatarocks.com/data/data.csv"
  },
  // Replace the translation below with your own labels
  localization: {
    toolbar: {
      connect: "Conectar",
      open: "Abierto",
      save: "Salvar",
      export: "Exportar",
      // Other labels
    }
  }
};

Set localization for all reports

If you want to set one language for all reports, add a global object with localization when initializing WebDataRocks:

import { Component } from "@angular/core";
import { WebdatarocksPivotModule } from "@webdatarocks/ngx-webdatarocks";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [WebdatarocksPivotModule],
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  report = {
    // Your report
  };
  globalReport = {
    // Replace this file with your own localization file
    localization: "https://cdn.webdatarocks.com/loc/es.json"
  };
}

<app-wbr-pivot
 [toolbar]="true"
 [report]="report"
 [global]="globalReport">
</app-wbr-pivot>

import { Component } from "@angular/core";
import { WebdatarocksPivotModule } from "@webdatarocks/ngx-webdatarocks";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [WebdatarocksPivotModule],
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  report = {
    // Your report
  };
  globalReport = {
    // Replace the translation below with your own labels
    localization: {
      toolbar: {
        connect: "Conectar",
        open: "Abierto",
        save: "Salvar",
        export: "Exportar",
        // Other labels
      }
    }
  };
}

<app-wbr-pivot
 [toolbar]="true"
 [report]="report"
 [global]="globalReport">
</app-wbr-pivot>

Learn more about the Global Object.

Our pivot table can easily be translated into different languages. This article describes the process of language localization for WebDataRocks reporting component.

Available localizations

• English (default)
• German
• Spanish
• Italian
• Brazilian Portuguese
• Chinese
• Turkish

Localization files for new languages can be added by creating a new pull request on GitHub. Our team highly appreciates any help.

Create a custom localization file

Follow the steps below to create your own localization file based on our template:

Step 1. Download template JSON file. It contains all labels that are used in WebDataRocks and English values for them.

Step 2. Translate values into the language you want.

For example, you want a Spanish localization. You start from replacing the first label-value pair from the template ("flatHierarchyBox": "Select and arrange columns") with its Spanish equivalent ("flatHierarchyBox": "Seleccionar y organizar columnas") and keep on the same way with the whole file (e.g., check Spanish translated sample).

Localize a specific report

To set a specific language for a report, add a report.localization property with the necessary localization:

const report = {
  dataSource: {
    filename: "https://cdn.webdatarocks.com/data/data.csv"
  },
  // Replace this file with your own localization file
  localization: "https://cdn.webdatarocks.com/loc/es.json"
};

const report = {
  dataSource: {
    filename: "https://cdn.webdatarocks.com/data/data.csv"
  },
  // Replace the translation below with your own labels
  localization: {
    toolbar: {
      connect: "Conectar",
      open: "Abierto",
      save: "Salvar",
      export: "Exportar",
      // Other labels
    }
  }
};

Set localization for all reports

If you want to set one language for all reports, add a global object with localization when initializing WebDataRocks:

import React from "react";
import * as WebDataRocksReact from "@webdatarocks/react-webdatarocks";

export default function App() {
  const report = {
    // Your report
  };

  const globalReport = {
    // Replace this file with your own localization file
    localization: "https://cdn.webdatarocks.com/loc/es.json"
  };

  return (
    <div>
      <WebDataRocksReact.Pivot
        toolbar={true}
        report={report}
        global={globalReport}
      />
    </div>
  );
}

import React from "react";
import * as WebDataRocksReact from "@webdatarocks/react-webdatarocks";

export default function App() {
  const report = {
    // Your report
  };

  const globalReport = {
    // Replace the translation below with your own labels
    localization: {
      toolbar: {
        connect: "Conectar",
        open: "Abierto",
        save: "Salvar",
        export: "Exportar",
        // Other labels
      }
    }
  };

  return (
    <div>
      <WebDataRocksReact.Pivot
        toolbar={true}
        report={report}
        global={globalReport}
      />
    </div>
  );
}

Learn more about the Global Object.

A grand total is a value that is composed by adding together other total amounts (subtotals) of the row/column.

When creating a report, you can change the default way grand totals and subtotals are displayed on the grid. The available options are:

• Show and hide grand totals for the entire report
• Show and hide subtotals for the entire report
• Show grand totals only for the rows or columns
• Show subtotals only for the rows or columns

To show or hide grand totals and subtotals

• Via UI
  1. Go to the Options () tab on the Toolbar.
  2. Choose how to display grand totals and subtotals.
  3. Apply the changes.
• Programmatically
  • Configure totals through the grid.showTotals property of the Options Object:

    const report = {
      options: {
        grid: {
          showTotals: "off"
        }
      }
    }

  • Configure grand totals through the grid.showGrandTotals property of the Options Object:

    const report = {
      options: {
        grid: {
          showGrandTotals: "rows"
        }
      }
    };

  It is also possible to set grid.showTotals and grid.showGrandTotals options for all reports.

Example

Hide grand totals from the entire report:

Hide grand totals from the rows:

The layout of subtotals is changed similarly.

A grand total is a value that is composed by adding together other total amounts (subtotals) of the row/column.

When creating a report, you can change the default way grand totals and subtotals are displayed on the grid. The available options are:

• Show and hide grand totals for the entire report
• Show and hide subtotals for the entire report
• Show grand totals only for the rows or columns
• Show subtotals only for the rows or columns

To show or hide grand totals and subtotals

• Via UI
  1. Go to the Options () tab on the Toolbar.
  2. Choose how to display grand totals and subtotals.
  3. Apply the changes.
• Programmatically
  • Configure totals through the grid.showTotals property of the Options Object:

    report = {
      options: {
        grid: {
          showTotals: "off"
        }
      }
    }

  • Configure grand totals through the grid.showGrandTotals property of the Options Object:

    report = {
      options: {
        grid: {
          showGrandTotals: "rows"
        }
      }
    };

  It is also possible to set grid.showTotals and grid.showGrandTotals options for all reports.

Example

Hide grand totals from the entire report:

Hide grand totals from the rows:

The layout of subtotals is changed similarly.

A grand total is a value that is composed by adding together other total amounts (subtotals) of the row/column.

When creating a report, you can change the default way grand totals and subtotals are displayed on the grid. The available options are:

• Show and hide grand totals for the entire report
• Show and hide subtotals for the entire report
• Show grand totals only for the rows or columns
• Show subtotals only for the rows or columns

To show or hide grand totals and subtotals

• Via UI
  1. Go to the Options () tab on the Toolbar.
  2. Choose how to display grand totals and subtotals.
  3. Apply the changes.
• Programmatically
  • Configure totals through the grid.showTotals property of the Options Object:

    const report = {
      options: {
        grid: {
          showTotals: "off"
        }
      }
    }

  • Configure grand totals through the grid.showGrandTotals property of the Options Object:

    const report = {
      options: {
        grid: {
          showGrandTotals: "rows"
        }
      }
    };

  It is also possible to set grid.showTotals and grid.showGrandTotals options for all reports.

Example

Hide grand totals from the entire report:

Hide grand totals from the rows:

The layout of subtotals is changed similarly.

In WebDataRocks Pivot Table, data can be displayed in aggregated views or as a simple table. You can switch between three standard layouts to display the report data differently:

• Compact pivot table  – neat and concise data presentation.
• Classic pivot table – an Excel-like layout.
• Flat table – a simple grid with non-aggregated data.

Compact form

The compact pivot table form is enabled by default. This layout helps keep your data in a neat and concise style.

Features:

• Compact form enhances the readability of the report.
• If the rows contain more than one field, the members of the inner field can be expanded and collapsed by clicking on the outer field’s member name. 
• If the members of the field in the rows are expanded, they are placed one under the other, without being transferred to a separate column. 
• If the members of the field in the columns are expanded, they are placed in a separate row. 
• Subtotals are shown at the end of each row in a separate column.
• Grand totals are placed at the bottom in a separate row.

Classic form

The classic pivot table form suits perfectly those who would like to have an Excel-like user experience.

Features:

• If the rows contain more than one field, the members of the inner field can be expanded and collapsed by clicking on the outer field’s member name.
• If the members of the field in the rows are expanded, they are placed in a separate column. It is the main feature that distinguishes the classic layout from the compact one.
• If the members of the field in the columns are expanded, they are placed in a separate row. 
• Subtotals are shown in a separate row after each hierarchy in the rows.
• Grand totals are placed at the bottom in a separate row.

Flat form

The flat table is a raw data view, which reflects the data’s original structure. It’s the simplest form among the others.

Features:

• The data is shown without aggregation.
• Each field is placed in a separate column.
• Grand totals are placed in the first row.

To change the grid form

• Via UI
  1. Go to the Options tab () on the Toolbar.
  2. Select the form of your choice.
  3. Apply the changes.
• Programmatically
  Set a grid layout through the grid.type property of the Options Object:

  const report = {
    options: {
      grid: {
        type: "classic"
      }
    }
  };

  It is also possible to set the grid.type option for all reports.

In WebDataRocks Pivot Table, data can be displayed in aggregated views or as a simple table. You can switch between three standard layouts to display the report data differently:

• Compact pivot table  – neat and concise data presentation.
• Classic pivot table – an Excel-like layout.
• Flat table – a simple grid with non-aggregated data.

Compact form

The compact pivot table form is enabled by default. This layout helps keep your data in a neat and concise style.

Features:

• Compact form enhances the readability of the report.
• If the rows contain more than one field, the members of the inner field can be expanded and collapsed by clicking on the outer field’s member name. 
• If the members of the field in the rows are expanded, they are placed one under the other, without being transferred to a separate column. 
• If the members of the field in the columns are expanded, they are placed in a separate row. 
• Subtotals are shown at the end of each row in a separate column.
• Grand totals are placed at the bottom in a separate row.

Classic form

The classic pivot table form suits perfectly those who would like to have an Excel-like user experience.

Features:

• If the rows contain more than one field, the members of the inner field can be expanded and collapsed by clicking on the outer field’s member name.
• If the members of the field in the rows are expanded, they are placed in a separate column. It is the main feature that distinguishes the classic layout from the compact one.
• If the members of the field in the columns are expanded, they are placed in a separate row. 
• Subtotals are shown in a separate row after each hierarchy in the rows.
• Grand totals are placed at the bottom in a separate row.

Flat form

The flat table is a raw data view, which reflects the data’s original structure. It’s the simplest form among the others.

Features:

• The data is shown without aggregation.
• Each field is placed in a separate column.
• Grand totals are placed in the first row.

To change the grid form

• Via UI
  1. Go to the Options tab () on the Toolbar.
  2. Select the form of your choice.
  3. Apply the changes.
• Programmatically
  Set a grid layout through the grid.type property of the Options Object:

  report = {
    options: {
      grid: {
        type: "classic"
      }
    }
  };

  It is also possible to set the grid.type option for all reports.

In WebDataRocks Pivot Table, data can be displayed in aggregated views or as a simple table. You can switch between three standard layouts to display the report data differently:

• Compact pivot table  – neat and concise data presentation.
• Classic pivot table – an Excel-like layout.
• Flat table – a simple grid with non-aggregated data.

Compact form

The compact pivot table form is enabled by default. This layout helps keep your data in a neat and concise style.

Features:

• Compact form enhances the readability of the report.
• If the rows contain more than one field, the members of the inner field can be expanded and collapsed by clicking on the outer field’s member name. 
• If the members of the field in the rows are expanded, they are placed one under the other, without being transferred to a separate column. 
• If the members of the field in the columns are expanded, they are placed in a separate row. 
• Subtotals are shown at the end of each row in a separate column.
• Grand totals are placed at the bottom in a separate row.

Classic form

The classic pivot table form suits perfectly those who would like to have an Excel-like user experience.

Features:

• If the rows contain more than one field, the members of the inner field can be expanded and collapsed by clicking on the outer field’s member name.
• If the members of the field in the rows are expanded, they are placed in a separate column. It is the main feature that distinguishes the classic layout from the compact one.
• If the members of the field in the columns are expanded, they are placed in a separate row. 
• Subtotals are shown in a separate row after each hierarchy in the rows.
• Grand totals are placed at the bottom in a separate row.

Flat form

The flat table is a raw data view, which reflects the data’s original structure. It’s the simplest form among the others.

Features:

• The data is shown without aggregation.
• Each field is placed in a separate column.
• Grand totals are placed in the first row.

To change the grid form

• Via UI
  1. Go to the Options tab () on the Toolbar.
  2. Select the form of your choice.
  3. Apply the changes.
• Programmatically
  Set a grid layout through the grid.type property of the Options Object:

  const report = {
    options: {
      grid: {
        type: "classic"
      }
    }
  };

  It is also possible to set the grid.type option for all reports.