Adding tooltips

Adding a tooltip

To add a tooltip, you should use the tooltip parameter of the columns property:

• set it to false to disable
• set it to true or do not specify to show a tooltip by default
  tooltip can be a function that takes an object to be processed as an argument and returns the processed value

Example:

<script>
    import { getData } from "./common/data";
    import { Grid } from "@wx/react-grid";
    const { data } = getData();

    const columnsTooltip = [
        { id: "id", width: 50, tooltip: false },
        {
            id: "city",
            width: 100,
            header: "City",
            footer: "City",
        },
        {
            id: "firstName",
            header: "First Name",
            footer: "First Name",
            width: 150,
            tooltip: false,
        },
        {
            id: "lastName",
            header: "Last Name",
            footer: "Last Name",
            width: 150,
            tooltip: false,
        },
        { id: "email", header: "Email", footer: "Email" },
        { id: "companyName", header: "Company", footer: "Company" },
        { id: "stars", tooltip: false },
        { id: "date", tooltip: (obj) => obj.date?.toDateString() },
    ];

    let api;

</script>