Advanced JavaScript Forms and Data Input With SpreadJS Cell Enhancements

JavaScript SpreadJS Cell Types

SpreadJS includes many different cell types you can apply to any individual cell. Cell Types allow you to define the type of information that can be entered and displayed in the cell. You can also use predefined dropdowns to make it easier for your users to select and enter valid data.

Button

The button cell type allows you to add a button to any cell. Customize the appearance, such as color and text, and set button cell margins for any side.

Cell Buttons

Customizable cell buttons allow you to define and attach your action to any cell margin when clicked. Add a search icon to request a dynamically generated dialog.

Checkbox

The checkbox cell type allows you to add a checkbox to any cell. Define two or three state checkboxes and customize the text and text alignment.

Combobox

The combo box cell type allows you to add a drop-down list to any cell which can be non-editable or editable. Type in the edit portion of the cell, and the matching item is selected automatically.

Hyperlink

Hyperlink cell type allows you to add a link to any cell. You can display text in the cell that is different from the hyperlink, display a tooltip, and customize the link colors.

Radio List

The radio button cell type allows you to add radio button lists to any cell. Users can select one item from the available options. Customize the list display options, including text alignment, layout, direction, and spacing.

Checkbox List

The checkbox cell type, you can add checkbox lists to any cell. Users can select multiple items from the available options as well as customize list displays.

Button List

The button list cell type can add multiple buttons to any cell to select data. Provide users with the flexibility to choose one or multiple items from various options while working with spreadsheets.

Custom Cell

Custom cell types for JavaScript provides the flexibility to create spreadsheets tailored for specific business needs and requests. Build custom cell types with a FivePointedStarCellType definition.

Rich Text

The rich text feature can format text with different styles, text-decoration, text alignment, text in a vertical direction, word wrap, and text-indent. Utilize built-in JSON features with serialization, auto fit, and more.

Range Templates

The button cell type allows you to add a button to any cell. Customize the appearance, such as color and text, and set button cell margins for any side.


JavaScript SpreadJS Cell DropDowns

Quickly and easily select data with the cell dropdown menu feature. Create input form controls, advanced structured forms, and other interactive forms and dashboards within the spreadsheet. The cell dropdown options currently available in SpreadJS:

Multi-Column Picker

Developers can create this drop down by specifying a data source and column information, and then setting the style. The PROPERTY function can be especially useful for parsing the returned object, which is described in the PROPERTY Function section of this blog.

Vertical Text List Dropdown

A standard text list implementation comprising of simple text strings in a drop-down list.




Vertical Text List Dropdown with Icon

A standard text list with custom icons. This is essentially a standard vertical text list dropdown with the addition of custom icons.



Vertical Group List Dropdown

A text list with groups for different items. The items in the vertical list can be added to specific groups and indented accordingly.

Vertical Cascade Group List Dropdown

A text list with cascading sub-items for major items. This is similar to the vertical group list, with the groups in this drop down being cascading items.

Group Cascade List Dropdown

A text list with cascading sub-items and groups. This is a combination of the previous two vertical group lists, utilizing both groups and sub-items in those groups that cascade open.

Vertical Tree List Dropdown

A text list of groups with different orientations. This is similar to the vertical group list, but the groups can just be oriented in different directions.

Vertical Tree List Dropdown Collapse

A text list with vertical, collapsible tree items. Items in this list can be grouped similar to other lists, but with the ability to collapse and expand the items.

Custom Defined List Dropdown

A list with custom, defined items. You could use this to create custom dropdowns like color pickers.

Time Picker Dropdown

The time picker dropdown allows users to configure and select a specific time to populate the evaluated result in the cell.

Month Picker Dropdown

The month picker dropdown allows users to configure a specific month in a year to populate the evaluated result in the cell.

Day with Time Dropdown

This dropdown allows users to set Day with Time to populate the evaluated result in the cell, which is shown as a calendar with a scrolling time picker.

Day Minus Time Dropdown

This dropdown allows users to set the day to populate the evaluated result in the cell, which is just shown as a simple month calendar without the scrolling time picker.

Month Time Dropdown

This dropdown allows users to set Month with Time to populate the evaluated result in the cell, which is shown as a year calendar with a scrolling time picker.

Year Time Dropdown

This dropdown allows users to set Year with Time to populate the evaluated result in the cell, which is shown as a decade calendar with a scrolling time picker.

Horizontal Slider

A slider dropdown with a horizontal sliding number scale. You can define the points on this slider to fit requirements.



Vertical Slider

A slider dropdown with a vertical sliding scale. Similar to the horizontal slider dropdown, the different points on the slider can be defined specifically, and can be used for creating things like thermometers.

Default Color Picker

A slider dropdown with a Default Color Picker allows users to choose a specific color to populate the cell value with the hex code of the chosen color.


Custom Color Picker

A slider dropdown with a Custom Color Picker, allowing allows users to set custom color palettes which are defined by the developer.

Calculator Dropdown

The calculator dropdown allows users to compute the values and populate the evaluated result in the cell using standard calculator with the appropriate operators.

Workflow Dropdown

A powerful feature allows users to quickly select workflow items and populate the chosen value in the cell.

What's New in SpreadJS v15.2

SpreadJS v15.2 is available. This release offers several great new features, some of which include:

  • Name Box Component
  • Workbook Enhancements
  • Picture Shape Enhancements
  • Calculation Enhancements
  • TableSheet Enhancements
  • New Framework Support for React 18 & Angular 14
  • And Much More!