Cross-Platform JavaScript Excel XLSX Viewer

View XLSX Tables

This JavaScript data file viewer control offers seamless support for viewing tables from Excel XLSX and SpreadJS (SSJSON and .sjs) files, preserving the original row and column structure, header definitions, and applied formatting. This allows application end users to view structured, relational data in a clear and organized layout directly within the viewer. Tables provide an intuitive way to manage and interpret datasets by presenting information in a consistent, structured format.

The document viewer maintains all table formatting, headers, and hierarchy from the source file, ensuring important relationships remain visible and easy to understand without requiring Excel or additional tools. Developers can confidently load workbook files and deliver an accurate, read-only table experience ideal for dashboards, embedded reporting, and data exploration scenarios.

• View Demo and Code
• Tables Documenation

Toggle Notes

Our interactive JavaScript data viewer control provides an integrated Toggle Note option within its toolbar, allowing users to control the visibility of notes or comments embedded in the displayed data. This functionality is defined within the DataToolbarLayout type, which specifies available toolbar item properties including toggle-note. Developers can configure the order and visibility of these items by customizing the DataViewer.toolbarLayout property, ensuring that note toggling behavior fits seamlessly within the viewer’s interface. This feature enhances collaborative review workflows by enabling users to quickly reveal or hide cell-level annotations without leaving the JavaScript Data Viewer environment.

• View Demo and Code
• Notes or Comments Documentation

Group & Outlines

The JavaScript Data Viewer supports grouping and outlining, allowing users to view large datasets in a structured, hierarchical format. Grouped rows or columns can be expanded or collapsed as needed, enabling users to focus on specific data sections without losing the overall context of the dataset. This feature mirrors the outline functionality commonly used in spreadsheet applications, where related rows or columns are grouped together for easier navigation and analysis. Grouping and outlining are especially useful for summarizing data such as regional sales totals, department-level summaries, or category-based financial data, improving both clarity and usability within the JavaScript Data Viewer.

• Group and Outline Documenation

Cell Range Selection

This JavaScript data file viewer provides intuitive cell range selection capabilities, allowing users to select individual cells, continuous ranges, or multiple non-adjacent ranges within a dataset. This functionality improves data exploration by enabling focused actions such as copying, highlighting, and reviewing specific portions of the data without altering the underlying file. Users can click and drag to define a selection or use keyboard navigation to move through cells, similar to behavior in traditional spreadsheet applications. This feature enhances usability when working with large or complex data sets displayed in the viewer, making it easier to analyze or compare data values interactively.

Developers can programmatically select cell ranges through the Range class with the help of the col, colCount, row, and rowCount properties. This allows easy access to programmatically enhance client-side viewer functionality.

• View Demo and Code
• Selection Documentation

Resize Row & Columns

The Document Solutions Data Viewer control allows users to resize rows and columns at runtime, providing greater flexibility when viewing large or complex datasets. Users can hover over the edge of a row or column header to display the grid decorator and drag it to adjust the size of individual rows or columns. Multiple rows or columns can be resized simultaneously by selecting them together and dragging the decorator, and resizing the entire grid at once is also supported. These resizing capabilities make it easier to tailor the data layout for clear visualization within the JavaScript Data Viewer.

• Resize Rows and Columns Documenation

Autofit Row & Columns

The JavaScript data document viewer control includes an autofit feature that allows users to automatically adjust the size of rows and columns based on the length of the data they contain. By double-clicking the grid decorator located on a row or column header, the viewer automatically resizes that row or column to match the size of the longest data string. Users can also select multiple rows or columns, or even the entire grid, and double-click any header edge to autofit all selected areas simultaneously. This feature ensures that data is displayed clearly and efficiently, eliminating unnecessary whitespace while improving overall presentation and ease of review.

• Autofit Rows and Columns Documentation

Keyboard Shortcuts

The JavaScript data file viewer, DsDataViewer, supports a variety of keyboard shortcuts that make it easier for users to navigate and interact with data without relying solely on the mouse. Common spreadsheet-style shortcuts allow users to move between cells, select data ranges, open or close outlines, and perform basic view actions directly from the keyboard. These shortcuts enhance accessibility and speed when working with large datasets, particularly in scenarios that require frequent navigation or repetitive actions. Developers and users can refer to the keyboard shortcuts documentation to review the complete list of supported key combinations and their corresponding functions.

• Keyboard Shortcuts Documentation

Advanced Search

The JavaScript Data Viewer provides an Advanced Search feature through the Search Panel located in the left sidebar, allowing users to search for specific data across an entire workbook or within a single worksheet. The Search Panel displays a query results table that includes the sheet name, cell position, and matching value, and users can jump directly to a cell by clicking its result. Search options include the Find What field for entering keywords or values, and the Within option for choosing between Current Sheet and All Sheets. The panel also offers advanced options such as Match Case, Match Exactly, and Use Wildcards, enabling precise control over search behavior. Wildcards include the asterisk (*), question mark (?), and tilde (~), each supporting flexible search patterns for partial matches or special characters. Search results update automatically when search parameters are modified, ensuring accurate, real-time filtering for any dataset displayed in the JavaScript Data Viewer.

• View Demo and Code
• Search Data Documentation

Sort & Filter

The Professional DsDataViewer provides a Sort & Filter button in the toolbar, enabling users to organize and refine datasets directly within the viewer or within tables in the file. Sorting is a key function for data analysis, allowing users to order information alphabetically, numerically, or by color scale to improve readability and decision-making. Data can be sorted in a selected range or table using the Sort & Filter drop-down menu, or by opening the Filter dialog through the filter icon. Users can sort text and numbers with the drop-down options, or sort by text, number, and color using the Filter dialog for more detailed control. The viewer provides guidance through built-in error messages if users attempt to sort multiple or empty ranges, ensuring accurate data handling. Sorting can be applied at both the range and table level, where data is reorganized based on the selected column, giving users flexibility when working with structured or ad hoc data layouts.

Filtering further enhances data analysis by allowing users to focus on specific subsets of information while temporarily hiding irrelevant entries. The Filter dialog enables filtering by value, data type, color, or custom criteria, and filters can be applied additively across multiple columns to progressively narrow down results. When the filter icon is visible, users can click it to select desired criteria, or they can enable it via the Sort & Filter menu for ranges or tables where it is not yet active. This filtering system supports both traditional Auto Filter behavior and integration with slicers for visual data control, offering a highly interactive way to isolate meaningful insights within a dataset. Together, sorting and filtering provide users with essential tools for effective data organization and exploration directly in your web applications.

• View Demo and Code
• Sorting and Filtering Documentation

Data Slicer

Our Professional JavaScript DsDataViewer license supports slicers, which provide an interactive and visual way to filter data within Tables and Pivot Tables. Slicers display a set of buttons representing different filter categories or values, allowing users to instantly narrow down the visible data with a single click. Unlike traditional filter menus, slicers make it easy to see which filters are currently active, improving clarity and enhancing the user experience when analyzing complex datasets. Users can select multiple slicer items by holding the Ctrl key or by using the Multi-Select button, making it possible to apply several filters at once across various data segments.

Each slicer also includes a Clear Filter button that removes all applied filters instantly, returning the view to its full dataset. This streamlined interaction model enables users to toggle between filtered and unfiltered views quickly without reopening filter dialogs or menus. Slicers in the JavaScript Data Viewer provide both speed and transparency, allowing users to perform fast, visual filtering and always understand what subset of data is being displayed.

• View Demo and Code
• Slicer Documentation

Table Filtering & Sorting

The DsDataViewer Professional License unlocks advanced table filtering and sorting, allowing users to quickly explore financial records, sales reports, employee lists, and other business-critical datasets directly in the browser. Users can interact directly with table headers to sort columns, apply filter conditions, and refine large datasets into clear, meaningful views. 

These controls mirror familiar Excel-style behaviors, making it easy to focus on specific segments of data without altering the underlying spreadsheet. Whether narrowing results, comparing key metrics, or improving readability, this JavaScript data file viewer delivers a fast and intuitive way to work with complex table-driven information.

• View Demo and Code
• Managing Table Data Documentation

Extract Data

This JavaScript data file viewer enables developers to programmatically extract data from a workbook through several built-in methods that provide access to sheet content and cell-level values. Using methods such as getSheet, getSheetFromName, and getActiveSheet, developers can identify and work with specific worksheets within the viewer. Once a sheet is obtained, data can be extracted by calling the Worksheet class’s getText method to retrieve formatted text and the getValue method to return raw data from individual cells. For larger selections, the getSelections method retrieves the currently selected ranges, allowing iteration over rows and columns to collect both formatted and unformatted cell data.

These capabilities make it simple to integrate the viewer into automated data processing workflows, such as exporting selected results, building summaries, or performing real-time validation. The combination of getSheet-based methods and range operations enables precise programmatic access to any portion of the displayed spreadsheet without manual interaction. The feature supports a wide range of data-driven applications, providing flexibility for analytics, auditing, or content extraction scenarios within the JavaScript Data Viewer.

• View Demo and Code
• Extract Data Documentation

Chart

The JavaScript DsDataViewer’s Professional License allows developers to display charts embedded within Excel XLSX and SpreadJS (.ssjson and .sjs) files, providing users with an intuitive and graphical way to interpret data. Charts help visualize comparisons, patterns, and trends, making complex information easier to understand directly within the viewer interface. The viewer automatically renders standard chart types found in Excel and SpreadJS documents, preserving the formatting and layout defined in the source file.

In addition to standard charts, the JavaScript Data Viewer can also display pivot charts and chart sheets from Excel files. While these charts are presented visually, pivot charts are rendered as static representations without interactive filtering or manipulation. This feature is ideal for dashboards, analytical reports, and presentations where users need to view underlying data visualizations without requiring modification capabilities.

• View Demo and Code
• Chart Documentation

Shape

The professional JavaScript Data Viewer supports displaying shapes included in Excel XLSX and SpreadJS (.ssjson and .sjs) files, allowing developers to present visually rich dashboards and annotated reports directly in the browser. Shapes can be used to add graphical elements, store descriptive text, or highlight key data points, improving the visual communication of spreadsheet content. The viewer accurately renders these shapes as they appear in the original file, preserving layout, style, and color properties.

If a shape contains a hyperlink, users can click the shape to navigate to the linked destination, adding interactivity and connectivity to the viewing experience. This makes shapes particularly useful for building visual dashboards, navigation aids, and interactive documentation within data-driven spreadsheets.

• View Demo and Code
• Shape Documentation

Pictures

Our professional license option for this JavaScript data viewer supports displaying pictures contained in Excel XLSX and SpreadJS (.ssjson and .sjs) files, allowing images to appear exactly as they do in the original spreadsheet. Pictures can be used to provide visual context, illustrate key points, or add branding and design elements to worksheets, making reports and dashboards more engaging and informative. The viewer preserves image placement, size, and formatting for a consistent presentation across devices.

When a picture includes a hyperlink, users can click the image to navigate directly to the linked destination, enabling interactive experiences within the displayed document. This functionality is ideal for enhancing business reports, marketing materials, and analytical dashboards that rely on visual storytelling.

• View Demo and Code
• Pictures Documentation

Barcodes

This professional JavaScript data file viewer control supports displaying barcodes created using SpreadJS barcode formulas within .ssjson or .sjs files. Barcodes provide a compact and machine-readable way to store information such as IDs, inventory data, or transaction codes, making them valuable for logistics, retail, and data management applications. When a spreadsheet containing barcode formulas is opened, the viewer automatically renders the barcodes as visual elements, preserving their appearance and position within the worksheet.

This feature allows users to view and share barcode-enhanced documents directly in the browser without requiring any external tools or conversion steps. It is particularly useful for reviewing and distributing files that include serialized data, product identifiers, or other encoded details generated within a SpreadJS environment.

• View Demo and Code
• Barcode Documentation

Load Files Via UI

The Document Solutions Data Viewer allows users to load data files directly from the client side through its intuitive user interface. By clicking the Open button located in the top-left corner of the viewer, users can access the Select Data File dialog to choose and open supported file formats such as XLSX, CSV, ARROW, PARQUET, and SpreadJS (.ssjson and .sjs). Within the dialog, users can specify the Data Type from a dropdown menu, select Local as the file source, and then use the Browse option to locate and open a desired file from their device. The interface also includes open option checkboxes and configuration fields that let users control how certain formats, like CSV files, are displayed once loaded.

When opening a password-protected file, the viewer automatically prompts for a password through a dedicated Password dialog before displaying the content. Once the appropriate options are set, clicking the Open button loads the selected file into the viewer, where users can immediately preview and interact with the data. This process enables a seamless, user-friendly experience for importing and viewing spreadsheet data entirely within the browser, without requiring any server-side processing.

• View Demo and Code
• Load Files on Client-Side Documentation

Programmatically Load Files

This JavaScript data viewer allows developers to load data files programmatically through the openFile method of the DsDataViewer class. This method accepts three parameters: the file source, the file type, and open options for the selected format. The file parameter can be provided as a blob object, a URL string, or a URL object, while the fileType parameter supports multiple formats, including XLSX, CSV, ARROW, PARQUET, and SpreadJS (.ssjson and .sjs). The openOptions parameter provides configuration flexibility through format-specific options such as XlsxOpenOptions, SSJsonOpenOptions, SjsOpenOptions, and CsvOpenOptions, allowing fine-tuned control over how files are loaded and displayed in the viewer.

To open a local file using the API, developers can convert the target file into a blob object and pass it to the openFile method. Once the viewer instance is initialized, the specified file is fetched, converted to a blob, and then rendered within the viewer for immediate use. This approach enables seamless integration of file-loading functionality into automated workflows, dashboards, or data-driven web applications, providing flexibility for scenarios where files need to be opened dynamically from local or remote sources.

• View Demo and Code
• Load Files using API Documentation

Load Files from Remote URL

The JavaScript Data Viewer enables developers to load spreadsheet files directly from web-hosted locations using the openFile method of the DsDataViewer class. This method accepts either a URL string or a URL object, allowing seamless integration of remote data sources into web applications. Files stored on content delivery networks or external servers can be loaded by simply passing the file’s absolute or relative URL to the method, making it possible to display remote datasets without manual download or local file handling. The feature supports the same file formats as other loading methods, including XLSX, CSV, ARROW, PARQUET, and SpreadJS (.ssjson and .sjs), ensuring compatibility across a variety of use cases.

This capability simplifies workflows where data files are stored in cloud environments, project repositories, or internal web servers. Developers can dynamically fetch and render content for dashboards, reporting tools, or analysis applications by referencing hosted spreadsheets. Whether using an absolute URL or a path relative to the current page, the JavaScript Data Viewer efficiently retrieves and displays the requested file for immediate interaction.

• View Demo and Code
• Load from Remote URL Documentation

XLSX

The JavaScript Data Viewer provides multiple configuration options for opening and displaying XLSX files, giving users control over how data is presented within the viewer. These settings can be specified through the Select Data File dialog at the client side or programmatically via the XlsxOpenOptions property when using the openFile method. Developers can determine whether to show or hide hidden sheets, rows, or columns, as well as choose to display filters or retain existing row and column groupings. Additional flexibility is provided for password-protected files, where users can specify a password directly within the open options to decrypt and view secure content.

By adjusting the available parameters, developers can fine-tune the file loading experience to suit specific user requirements or application scenarios. For example, the showHiddenSheets, showHiddenRows, showHiddenColumns, showFilters, keepRowGroups, keepColumnGroups, and password members allow precise customization of how Excel files appear in the viewer. This makes it easy to maintain consistent visibility settings, preserve workbook structure, and handle encrypted files seamlessly.

• View Demo and Code
• XLSX Open Option Documentation

Open Password-Protect XLSX

The Document Solutions Data Viewer JavaScript control supports opening password-protected XLSX files, allowing users to securely access encrypted spreadsheets directly in the browser. When a protected file is opened through the viewer’s interface, a Password dialog automatically appears, prompting the user to enter the correct password before the document can be displayed. This ensures that confidential or sensitive information remains secure while still providing an accessible way for authorized users to view protected content.

Developers can also handle password-protected files programmatically by using the XlsxOpenOptions password property with the password parameter when calling the openFile method. This approach allows automated loading of secure files while maintaining controlled access through application logic. By combining both UI-based and API-driven password entry methods, the JavaScript Data Viewer offers flexibility for organizations that require secure data handling and user authentication.

• View Demo and Code

CSV

This JavaScript data file viewer control allows users to open CSV files with full control over how the data is parsed and displayed. Open options can be defined at the client side through the Select Data File dialog or set programmatically using the CsvOpenOptions property when calling the openFile method. These options let developers configure how rows and columns are separated, specify the text encoding of the file, and determine whether the CSV includes a column header row. This ensures that data imported from different sources or regional formats is displayed accurately and consistently within the viewer.

The CSV open options include several key members for customization: columnSeparator, rowSeparator, encoding, and columnHasHeader. Developers can specify custom characters or strings for separating rows and columns, choose the appropriate encoding format such as UTF-8, and indicate whether the first line of the file should be treated as headers. By fine-tuning these parameters, users can ensure correct data alignment and readability for any CSV file.

• View Demo and Code
• CSV Open Options Documentation

SpreadJS (SJS & SSJSON)

The JavaScript data file viewer, DsDataViewer, supports opening SpreadJS (.sjs and .ssjson) files with multiple configuration options that let users tailor how data appears within the viewer. These options can be defined through the Select Data File dialog at the client side or specified programmatically using the SjsOpenOptions property when calling the openFile method. Users can choose to display or hide hidden sheets, rows, and columns, as well as control the visibility of filters and grouping elements. This provides a flexible viewing experience that accommodates both simplified and fully detailed spreadsheet views depending on the user's preference or application context.

Developers can refine how the viewer displays source file structures by setting parameters such as showHiddenSheets, showHiddenRows, showHiddenColumns, showFilters, keepRowGroups, and keepColumnGroups. These members control the visibility of previously hidden spreadsheet elements and whether existing groupings from the original file should be retained or discarded. Together, they ensure the loaded SpreadJS files maintain their intended layout and logical structure while still giving developers precise control over what is displayed.

• View the SJS Demo and Code
• View the SSJSON Demo and Code
• SJS Open Options Documentation

Apache Arrow

This JavaScript data viewer supports opening and displaying Apache Arrow files, enabling developers to visualize and analyze large, structured datasets directly in the browser. By using the openFile method of the DsDataViewer class and selecting the FileType.Arrow, Arrow files can be fetched as blobs and loaded seamlessly into the viewer without conversion or preprocessing. This format is optimized for fast, columnar data access, making it ideal for applications that need to handle high-performance analytics or memory-efficient data interchange.

With native support for the Arrow file type, the JavaScript Data Viewer provides a straightforward way to inspect tabular data used in data science and analytics workflows. Developers can integrate this functionality into dashboards or reporting tools to allow users to explore Arrow datasets interactively.

• View Demo and Code

Parquet Files

The Document Solutions JavaScript data viewer control supports loading Apache Parquet files, enabling developers and users to view and analyze high-performance, columnar data formats within a browser-based environment. By calling the openFile method of the DsDataViewer class and selecting the FileType.Parquet, Parquet files can be fetched as blobs and rendered seamlessly in the viewer, preserving their columnar structure for efficient data access. This allows quick inspection of large analytical datasets without requiring conversion or specialized backend processing, making the feature ideal for applications that work with modern data pipelines.

Parquet file support provides flexibility for integrating big data workflows and analytics directly into web applications built with the JavaScript Data Viewer. Developers can visualize structured data from Parquet sources and deliver responsive data exploration experiences without compromising performance.

• View Demo and Code

Customize Toolbar

The JavaScript Data Viewer allows developers to fully control the toolbar layout for different view modes, including default (desktop), mobile, and fullscreen, so the viewer UI can match the target device and use case. Through the DataToolbarLayout interface, you can retrieve the current toolbar configuration using DsDataViewer.findControl and then inspect viewer.toolbarlayout to see which buttons are enabled for each mode. Each view mode can have its own set of buttons, and you can provide arrays of button names such as open, zoom, fullscreen, toggle-note, and theme-change to define the exact order and visibility. This makes it easy to create a pared-down toolbar for mobile devices, a richer layout for desktop users, or a focused set of controls for full-screen viewing.

You can also modify only one view mode at a time by assigning a new layout to viewer.toolbarlayout.default, viewer.toolbarlayout.mobile, or viewer.toolbarlayout.fullscreen, without affecting the other modes. This API affects only the layout, not the internal display rules of the viewer; for example, buttons like Sort & Filter or toggle-note still depend on the file content and license level to appear.

• View Demo and Code
• Customize Toolbar Documentation

Customize Sidebar

The JavaScript Data Viewer allows developers to control the appearance and behavior of the sidebar to create a more customized and focused interface. The sidebarLayout property defines which sidebar panels are visible, enabling you to include or exclude features such as the Search Panel based on user needs. By assigning an empty array or specific panel names like SearchPanel to sidebarLayout, developers can configure an empty sidebar, display selected panels, or restore the default layout. This flexibility helps streamline the viewer interface for different workflows, whether you want to minimize distractions or provide quick access to search and navigation tools.

In addition to customizing the layout, the showSidebar method allows you to programmatically show or hide the sidebar at any time. Calling showSidebar(true) displays the sidebar, while showSidebar(false) hides it, providing dynamic control over screen space and user interaction. This functionality is particularly useful in responsive designs or embedded viewer scenarios where the sidebar visibility may change based on context.

• View Demo and Code
• Customize Sidebar Documentation

Built-In Themes

The JavaScript Data Viewer includes several built-in themes to easily adjust the viewer’s appearance to match an application’s visual design. These pre-defined themes are provided within the themes folder of the DsDataViewer package and can be applied by linking the desired theme stylesheet in the HTML document. For example, adding a reference to dark.css enables a dark mode theme that enhances readability in low-light environments. This makes it simple to switch between light and dark appearances or integrate the viewer into a larger UI that already uses specific color schemes.

Developers can define a default theme for the viewer by including the appropriate stylesheet before rendering the viewer element. The built-in themes ensure consistent and professional styling without requiring additional configuration or custom CSS. They can also be changed dynamically if needed, allowing applications to support user preference toggles such as light and dark modes.

• View Demo and Code

Override CSS Styles

The JavaScript Data Viewer allows developers to override the default CSS styles to create a fully branded and visually consistent experience within their applications. By defining custom CSS rules, you can modify various UI components such as toolbar buttons, menu panels, dialog headers, and accent colors. For instance, developers can change the background color of buttons, adjust hover effects, and modify icon or text colors to reflect custom themes or corporate color palettes. This approach gives complete control over the viewer’s look while retaining its built-in functionality and responsive layout.

To apply custom styling, developers can create a separate CSS file (for example, style.css) and include it after the default viewer stylesheets in the HTML document. Custom rules take precedence, enabling precise visual adjustments such as updating accent colors, adjusting button focus effects, or changing modal dialog appearances. This method is ideal for embedding the JavaScript Data Viewer in applications that require cohesive visual integration with existing UI frameworks.

• View Demo and Code