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

mui-virtualized-table-mui5

v5.1.1

Published

Material-UI table with windowing, row/column freezing, and more

Downloads

6

Readme

mui-virtualized-table-mui5

This is a fork of mui-virtualized-table.

  • Converted to TypeScript
  • MUI is updated to MUI5
  • Style is now replacable with useStyles property
  • Columns.header can be function

install with npm -i mui-virtualized-table-mui5 or some command like this.


Combination of Material UI visual components with react-virtualized for improved performance and features with a simple API.

For examples of <MuiVirtualizedTable> in action, see demo or view the source

Features

  • Uses windowing for performance (via react-virtualized)
  • Freeze rows and/or columns
  • Fixed or variable (%) column widths
  • Resizable columns

Props

| Property | Type | Required | Default | Description | | ------------------- | -------------- | -------- | ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | useStyles | makeStyles() | | useDefaultStyles | | | data | array | ✓ | | Data to render using defined columns {columnKey: value}[row] or value[row][column] | | columns | array | ✓ | | Defines the columns in the table.Column format: {'name', 'header', 'onHeaderClick', 'width', 'cell', ...cellProps }name: Name of headerheader: (optional) Name or Callback to display instead 'name'onHeaderClick: (optional) Callback when header is clicked on (has precendence over onHeaderClick on tablewidth: (optional) Width of cellcell: (optional) Callback for rendering associated column cell data. Passes the row data for the associated cell. | | cellProps | object | func | | Pass initial props to TableCell (ex. cellProps={{ padding: 'dense' }}). Specifying same property within the column definition cellProps will override. Can also be a function which is passed column, rowData similiarly to onCellClick | | width | number | ✓ | | Visible width of table. Will scroll horizontally if sum of column widths are greater than defined width | | columnWidth | number or func | | | Static column widths if number, calulated based on columns definitons if not specificed, or can pass in a function to peform own calcuation based on data | | height | number | | calculted from data.length or pagination.rowsPerPage if defined | Visible height of table. Will scroll vertically if sum of column heights are great than defined height | | maxHeight | number | | 0 | Maximum height of table. Useful when using calculated | | fitHeightToRows | boolean | | false | Always fit the content height to row data. Only useful when using pagination and you want to reduce the height on non-full pages (will move paginator on different length results) | | rowHeight | number | | 48 | Height of rows | | fixedRowCount | number | | 0 | Number of rows to remain fixed at the top of the viewport (freeze rows). Based on columns definition order | | fixedColumnCount | number | | 0 | Number of columns to remain fixed at the left of the viewport (freeze columns). Based on columns definition order | | includeHeaders | bool | | false | Add header row to top of data. Useful to also set fixedRowCount to 1 | | onHeaderClick | func | | | Called with column definition of header clicked on. Useful to set sort data and set orderBy and orderDirection | | onCellClick | func | | | Called with column definition and row data when non-header cell is clicked on (ex. onCellClick={(event, { column, rowData, data} ) => alert(rowData[column.name])}) | | onCellDoubleClick | func | | | Called with column definition and row data when non-header cell is double clicked on (ex. onCellDoubleClick={(event, { column, rowData, data} ) => alert(rowData[column.name])}) | | onCellContextMenu | func | | | Called with column definition when non-header cell is right clicked on (ex. onCellContextMenu={(event, { column }) => alert(column.name)}) | | pagination | object | | | If defined, will add pagination to bottom of table and pass props to Material-UI's TablePagination component. Must set count, onChangePage, page, and rowsPerPage if defined. | | orderBy | string | | | If defined, will show column's header with matching name using TableSortLabel | | orderDirection | string | | 'desc' | The order of the sort direction | | resizable | bool | | | Enable column resizing handles |

Running Storybook

This project has some storybook stories.

To run storybook, you have to install the story dependencies first:

$ cd stories
$ yarn install
$ cd ..

Then use yarn to run the storybook script:

$ yarn install
$ yarn storybook