Adding Bullet Points to FlexSheet Cells in Vue

Background

You can add bullet points to specific FlexSheet cells by registering a custom formula with the addFunction method. For example, entering =customBulletFunc(B3) in B2 displays the value of B3 prefixed with a bullet.

Steps to Complete

1. Install the Wijmo packages.
2. Register the FlexSheet components.
3. Add FlexSheet to the template.
4. Define the custom bullet function.
5. Register the custom function.
6. Populate the source cell and apply the formula.

Getting Started

Install the Wijmo packages

npm install @mescius/wijmo @mescius/wijmo.grid @mescius/wijmo.grid.sheet @mescius/wijmo.vue2.grid.sheet @mescius/wijmo.styles

• These packages provide the Wijmo core library, FlexGrid, FlexSheet, Vue components, and styles. The Vue integration package retains vue2 in its name and provides registration support for Vue 3.

Register the FlexSheet components

import { createApp } from 'vue';
import App from './App.vue';
import { registerGridSheet } from '@mescius/wijmo.vue2.grid.sheet';

import '@mescius/wijmo.styles/wijmo.css';

const app = createApp(App);

registerGridSheet(app);

app.mount('#app');

• The registerGridSheet function registers the wj-flex-sheet and wj-sheet components. The stylesheet supplies the default appearance for cells, headers, and sheet tabs.

Add FlexSheet to the template

<template>
  <div>
    <h3>FlexSheet Custom Bullet Function</h3>

    <wj-flex-sheet
      style="height: 400px;"
      :initialized="initializeFlexSheet"
    >
      <wj-sheet
        name="Bullet Example"
        :row-count="20"
        :column-count="10"
      />
    </wj-flex-sheet>
  </div>
</template>

• The wj-sheet component creates an unbound worksheet with 20 rows and 10 columns. The initialized callback receives the FlexSheet instance when the control is ready.

Define the custom bullet function

<script setup>
function bulletFunc(cellValue) {
  return '\u2022\u00A0\u00A0' + cellValue[0];
}
</script>

• For the single-cell reference used in this example, cellValue[0] retrieves the source value. The function prefixes it with a Unicode bullet (\u2022) and two nonbreaking spaces (\u00A0).

Register the custom function

function initializeFlexSheet(sheet) {
  sheet.addFunction(
    'customBulletFunc',
    bulletFunc,
    'Adds a bullet point to a referenced cell value.',
    1,
    1
  );
}

• The addFunction method registers customBulletFunc with the FlexSheet calculation engine. Its final two arguments specify that the function requires exactly one argument.

• To use =li(B3) instead, change the registered name from customBulletFunc to li.

Populate the source cell and apply the formula

// Store the source text in B3.
sheet.setCellData(
  2,
  1,
  'This cell text is marked with a bullet'
);

// Display the bulleted result in B2.
sheet.setCellData(1, 1, '=customBulletFunc(B3)');

• The setCellData method uses zero-based row and column indexes. Therefore, (2, 1) identifies B3, and (1, 1) identifies B2.

B2 displays:

•  This cell text is marked with a bullet

• The formula must reference a different cell from the cell containing it. Entering =customBulletFunc(B2) in B2 creates a circular reference and results in an error.

With this setup, you can add bullet points to specific FlexSheet cells in Vue using a custom formula while preserving the source text in a separate cell.

Happy coding!