Skip to Content
Logo of RG Logo of RG
  • Home
  • Shop
  • Events
  • Courses
  • Company
    • News
    • Success Stories
  • Odoo Docs 19
  • Appointment
  • Jobs
  • Contact us
  • 0
  • 0
  • +1 555-555-5556
  • Sign in
Logo of RG Logo of RG
  • 0
  • 0
    • Home
    • Shop
    • Events
    • Courses
    • Company
      • News
      • Success Stories
    • Odoo Docs 19
    • Appointment
    • Jobs
    • Contact us
  • +1 555-555-5556
  • Sign in
Odoo Docs 19
Home Components Guides Classes Search
418 components
Data Display
  • action
  • Action Container
  • Action Helper
  • Action Menus
  • Animated Number
  • Attach Document
  • Attach Document Widget
  • Barcode Video Scanner
  • Base Settings
  • Block UI
  • Block UI
  • Breadcrumbs
  • Burger Menu
  • Button Box
  • calendar
  • Calendar Common Renderer
  • Calendar Controller
  • Calendar Filter Section
  • Calendar Mobile Filter Panel
  • Calendar Quick Create
  • Calendar Renderer
  • Calendar Side Panel
  • Calendar Year Renderer
  • Code Editor
  • Color List
  • Column Progress
  • command
  • Command Palette
  • Control Panel
  • Copy Button
  • Crop Overlay
  • currency
  • Custom Favorite Item
  • Custom Group By Item
  • Debug Menu Basic
  • Default Command Item
  • Demo Data
  • Display Exception
  • Display Notification
  • Documentation Link
  • Domain Selector
  • Dropzone
  • effect
  • emoji
  • Emoji Picker
  • error
  • Error Handler
  • Export All
  • Expression Editor
  • field
  • File Upload
  • File Upload Progress Bar
  • File Upload Progress Container
  • File Upload Progress Record
  • File Viewer
  • form
  • Form Controller
  • Form Label
  • Form Renderer
  • Form Status Indicator
  • Graph Controller
  • Graph Renderer
  • Group Config Menu
  • Highlight Text
  • home
  • hotkey
  • Hotkey Command Item
  • http
  • Input
  • In Range
  • Install Kiosk
  • Install Kiosk Pwa
  • Install Prompt
  • Install Scoped App
  • Install Scoped App
  • kanban
  • Kanban Column Quick Create
  • Kanban Controller
  • Kanban Header
  • Kanban Quick Create Controller
  • Kanban Record
  • Kanban Record Quick Create
  • Kanban Renderer
  • Lazy Component
  • Lazy Session
  • list
  • List Controller
  • List Renderer
  • Loading Indicator
  • Loading Indicator
  • localization
  • Main Components Container
  • menu
  • Model Field Selector
  • Model Selector
  • Multi Record Selector
  • Multi Selection Buttons
  • name
  • Name And Signature
  • Notebook
  • orm
  • Overlay Container
  • Pager
  • Pager Indicator
  • Pager Indicator
  • Pivot Controller
  • Pivot Renderer
  • profiling
  • Profiling Item
  • Properties Group By Item
  • Rainbow Man
  • Range
  • Record Selector
  • reload
  • reload Company
  • Reload Context
  • Report Action
  • Report View Measures
  • Res Config Dev Tool
  • Res Config Edition
  • Res Config Invite Users
  • Resizable Panel
  • Ribbon Widget
  • Search Bar
  • Search Bar Menu
  • Search Bar Toggler
  • Search Panel
  • Select
  • Selection Box
  • Select Menu
  • Setting
  • Settings App
  • Settings Block
  • Settings Page
  • share Target
  • signature
  • Signature Widget
  • Soft Reload
  • sortable
  • Status Bar Buttons
  • swallow All Visitor Errors
  • Switch Company Item
  • Switch Company Menu
  • Switch Company Menu
  • Tags List
  • Time Picker
  • title
  • Transition
  • Tree Editor
  • Tree Processor
  • ui
  • User Invite
  • User Menu
  • User Menu
  • User Switch
  • User Switch
  • view
  • View Button
  • View Scale Selector
  • Web Client
  • Web Ribbon
  • Week Days
  • Widget
  • With Search
  1. Components
  2. Pivot Renderer
OWL data_display

Pivot Renderer

Odoo 19 OWL component — Pivot Renderer (views)

Live preview Interactive
Source excerpt web/static/src/views/pivot/pivot_renderer.js
import { Component, onWillUpdateProps, useRef } from "@odoo/owl";
import { CheckBox } from "@web/core/checkbox/checkbox";
import { Dropdown } from "@web/core/dropdown/dropdown";
import { DropdownState } from "@web/core/dropdown/dropdown_hooks";
import { DropdownItem } from "@web/core/dropdown/dropdown_item";
import { localization } from "@web/core/l10n/localization";
import { _t } from "@web/core/l10n/translation";
import { download } from "@web/core/network/download";
import { usePopover } from "@web/core/popover/popover_hook";
import { registry } from "@web/core/registry";
import { user } from "@web/core/user";
import { sortBy } from "@web/core/utils/arrays";
import { useService } from "@web/core/utils/hooks";
import { CustomGroupByItem } from "@web/search/custom_group_by_item/custom_group_by_item";
import { PropertiesGroupByItem } from "@web/search/properties_group_by_item/properties_group_by_item";
import { getIntervalOptions } from "@web/search/utils/dates";
import { GROUPABLE_TYPES } from "@web/search/utils/misc";
import { MultiCurrencyPopover } from "@web/views/view_components/multi_currency_popover";
import { ReportViewMeasures } from "@web/views/view_components/report_view_measures";

const formatters = registry.category("formatters");

class PivotDropdown extends Dropdown {
    /**
     * @override
     */
    get position() {
        return this.props.state.position || "bottom-start";
    }
    /**
     * @override
     */
    get target() {
        return this.props.state.target;
    }
}

export class PivotRenderer extends Component {
    static template = "web.PivotRenderer";
    static components = {
        CheckBox,
        CustomGroupByItem,
        Dropdown,
        DropdownItem,
        PivotDropdown,
        PropertiesGroupByItem,
        ReportViewMeasures,
    };
    static props = ["model", "buttonTemplate"];

    setup() {
        this.actionService = useService("action");
        this.model = this.props.model;
        this.table = this.model.getTable();
        this.l10n = localization;
        this.tableRef = useRef("table");

        this.dropdown = {
            state: new DropdownState({
                onClose: () => {
                    delete this.dropdown.cellInfo;
                    delete this.dropdown.state.target;
                    delete this.dropdown.state.position;
                },
            }),
        };
        this.multiCurrencyPopover = usePopover(MultiCurrencyPopover, {
            position: "right",
        });
        const fields = [];
        for (const [fieldName, field] of Object.entries(this.env.searchModel.searchViewFields)) {
            if (this.validateField(fieldName, field)) {
                fields.push(Object.assign({ name: fieldName }, field));
            }
        }
        this.fields = sortBy(fields, "string");

        onWillUpdateProps(this.onWillUpdateProps);
    }
    onWillUpdateProps() {
        this.table = this.model.getTable();
    }
    /**
     * Get the formatted value of the cell.
     *
     * @private
     * @param {Object} cell
     * @returns {string} Formatted value
     */
    getFormattedValue(cell) {
        const field = this.model.metaData.measures[cell.measure];
        const fieldAttrs = this.model.metaData.fieldAttrs[cell.measure] ?? {};
        const fieldInfo = {
            options: fieldAttrs.options ?? {},
            attrs: fieldAttrs,
        };
        let formatType = this.model.metaData.widgets[cell.measure];
        if (!formatType) {
            const fieldType = field.type;
            formatType = ["many2one", "reference"].includes(fieldType) ? "integer" : fieldType;
        }
        const formatter = formatters.get(formatType);
        const formatOptions = { field };
        if (formatter.extractOptions) {
            Object.assign(formatOptions, formatter.extractOptions(fieldInfo));
        }
        if (formatType === "monetary") {
            if (cell.currencyIds.length > 1) {
                formatOptions.currencyId = user.activeCompany.currency_id;
                return {
                    rawValue: cell.value,
                    value: formatter(cell.value, formatOptions),
                    currencies: cell.currencyIds,
                };
            }
            formatOptions.currencyId = cell.currencyIds[0];
        }
        return { value: formatter(cell.value, formatOptions) };
    }
Registry / API
Registry name
PivotRenderer
Category
—
Module
web
Slug
pivot-renderer
Nav group
data_display
Follow us

250 Executive Park Blvd, Suite 3400
San Francisco CA 94134

  • +1 555-555-5556
  • info@yourcompany.example.com
Copyright © Company name
Powered by Odoo - The #1 Open Source eCommerce