npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

protvista-datatable

v3.8.22

Published

[![Published on NPM](https://img.shields.io/npm/v/protvista-datatable.svg)](https://www.npmjs.com/package/protvista-datatable)

Downloads

905

Readme

protvista-datatable

Published on NPM

This component can be used to display a table of features.

Wrapping it within <protvista-manager> will allow highlighting of features as well as hidding features which are out of the display when zooming.

Demo

Usage

<protvista-datatable>
  <table>
    <thead>
      <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
        <th>Col 4</th>
      </tr>
    </thead>
    <tbody>
      <tr data-id="row1">
        <td>Lorem</td>
        <td>ipsum</td>
        <td>dolor</td>
        <td>sit</td>
      </tr>
      <tr data-id="row2">
        <td>Lorem</td>
        <td>ipsum</td>
        <td>dolor</td>
        <td>sit</td>
      </tr>
      <tr data-group-for="row2">
        <td>amet, consectetur adipiscing elit</td>
      </tr>
    </tbody>
  </table>
</protvista-datatable>

Styling

--protvista-datatable__hover: the background color of a row on mouse over

--protvista-datatable__active: the background color of a row within a highlighted region

--protvista-datatable__active--clicked: the background color of a clicked row

Data attributes

data-id

The row id. Also passed in the "change" event triggered on row click

data-group-for

A grouped row is collapsed by default, and a trigger is added to the row with the corresponding data-id to collapse/expand it.

data-filter

Generate a dropdown filter for a given column. A select menu will be populated with values defined in data-filter-value. data-filter should be set on both the column header cell and the corresponding cells and have the same value to allow mapping.

data-filter-value

A value used to populate the data-filter select menu content. The value should reflect the content of the cell.

API Reference

Properties

displaystart: number (optional)

The start position of the selected region.

displayend: number (optional)

The end position of the selected region.

highlight: string (optional)

A comma separated list of regions to highlight.

Each region follows the format: [start]:[end], where both [start] and [end] are optional numbers.

selectedid: string (optional)

The row id to select. Row ids are attributed based on the protvistaFeatureId attribute in each data point. These are added to the data in the various adapters.

height: string (optional)

The height of the table

expandTable: boolean (false)

Expands the table to show all the available rows (setting the height to auto instead of the specified/default height)

noScrollToRow: boolean (false)

Don't scroll to row if it has been selected

noDeselect: boolean (false)

Don't de-select row if clicking outside of table