The onViewClick feature offers developers a powerful callback mechanism to handle user interactions within a table or chart. By setting up this callback, developers can define custom actions when users click on specific rows in a table or bars in a chart. To ensure data integrity and safeguard sensitive information, the protected fields feature can be found in Click Settings. It prevents accidental removal of crucial data elements, ensuring the user interactions remain reliable and secure.


  onViewClick={(data) => {
    // do something with the data
  // more dashboard props

The definition of the onViewClick function is;

type onViewClick = (data: Component.OnViewClick) => void;
type Component.OnViewClick = {
  // A persisted id for the view.
  viewId: string;
  // Avaiable view types.
  type: 'barChart' | 'horizontalBarChart' | 'dataTable' | 'basicTable';
  // Returns the information related to the element clicked on.
  fields: {
    [key: string]: string | number;
  fieldsV2: { [key: string]: string | number }[];
  clicked: {
    // Available on certain view configurations.
    grouping: [{
      fieldId: string;
      function: string;
      value: string | number;
    // Specific information about the element clicked on
    value: {
      fieldId: string;
      function: string;
      value: string | number;

Protected Fields

To enable the onViewClick functionality, sensitive data elements within the data models must be identified and designated as protected fields. This straightforward configuration process reinforces the integrity of these critical data elements, ensuring a secure and reliable user interaction experience.

To set up Protected Fields open the Click Settings on the View in the Dashboard UI and add the fields you want to protect.


The viewId has been deliberately designed to persist consistently, regardless of any actions taken by you or your users within the view.