VTable-Sheet Style Configuration Guide

VTable-Sheet provides a rich set of style configuration options, allowing you to customize the appearance of your tables according to your needs. This guide will detail how to adjust table styles through the theme configuration.

Theme Configuration Entry

In VTable-Sheet, styles can be configured through the global theme property, or through the theme property of each sheet.

If both global and sheet-specific theme properties are configured, the sheet's theme takes precedence.

Here is a basic theme configuration example:

const options = {
  // Other configurations...
  theme: {
    rowSeriesNumberCellStyle: {
      // Row number cell style
    },
    colSeriesNumberCellStyle: {
      // Column number cell style
    },
    menuStyle: {
      // Menu style
    },
    tableTheme: {
      // Table theme
    }
  }
};

Detailed Theme Configuration

Row and Column Number Cell Styles

You can customize the styles of row and column numbers using rowSeriesNumberCellStyle and colSeriesNumberCellStyle:

theme: {
  rowSeriesNumberCellStyle: {
    bgColor: '#f5f5f5',
    fontSize: 12,
    fontFamily: 'Arial',
    color: '#333333',
    textAlign: 'center',
    textBaseline: 'middle'
  },
  colSeriesNumberCellStyle: {
    bgColor: '#f5f5f5',
    fontSize: 12,
    fontFamily: 'Arial',
    color: '#333333',
    textAlign: 'center',
    textBaseline: 'middle'
  }
}

The menuStyle property is used to configure the styles of table-related menus (to be implemented!):

theme: {
  menuStyle: {
    fontFamily: 'Arial',
    fontSize: 12,
    color: '#333333',
    padding: [8, 16, 8, 16], // top, right, bottom, left padding
    bgColor: '#ffffff'
  }
}

Table Theme Configuration

tableTheme is the style configuration for the table area of VTable-Sheet, which corresponds directly to VTable's theme system. For details, refer to: VTable Theme Configuration.

Note that the frameStyle in tableTheme will be automatically ignored.

Built-in themes in VTable such as ARCO, DARK ARCO, etc., are also applicable.

Custom Theme Example

Below is a complete theme configuration example, showing how to create a custom VTable-Sheet theme: