Gathering detailed insights and metrics for sticky-react-table
Gathering detailed insights and metrics for sticky-react-table
Installations
npm install sticky-react-tableDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
10.5.0
NPM Version
6.4.0
Releases
Unable to fetch releases
Languages
3
JavaScript
CSS
HTML
JavaScript (86.77%)
CSS (12.48%)
HTML (0.75%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
14 Stars
324 Commits
5 Forks
6 Watchers
3 Branches
5 Contributors
Updated on Jan 28, 2023
Maintainers
1
Package Meta Information
Latest Version
0.4.26
Package Id
sticky-react-table@0.4.26
Unpacked Size
158.82 kB
Size
28.66 kB
File Count
57
NPM Version
6.4.0
Node Version
10.5.0
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Sticky React Table
Many large-scale applications require the use of tables somewhere, if not everywhere. Many a times the requirements for these tables are quite complex and difficult to manage. Sticky React Table aims to solve all of these problems for React developers, with a host of features including customizable cells, rows, and headers, column switching, column filtering, sorting, virtualization, column resizing, etc. All of that, provided in a declarative manner, and built ground-up, especially for React!
The package is still under development. We are working actively to get this package to a stable release as soon as possible. Please do not use this package in any production application.
Table of Contents
Getting Started
Installing Sticky React Table is as simple as using your favourite package manager (ex. yarn or npm).
For NPM:
npm install sticky-react-table
For Yarn:
yarn add sticky-react-table
Basic Usage
The sticky-react-table package exposes two major components: Table and Column.
Consider a sample data set:
1[ 2 { 3 "name": "John Doe", 4 "age": 24, 5 "location": "Chicago", 6 "occupation": "Research Analyst" 7 }, 8 { 9 "name": "Jane Delaney", 10 "age": 22, 11 "location": "London", 12 "occupation": "Software Developer" 13 }, 14 { 15 "name": "Nishant Singh", 16 "age": 28, 17 "location": "Mumbai", 18 "occupation": "Business Developer" 19 } 20]
The simplest implementation of the above data as an Sticky React Table would be like so:
1import React, { Component } from 'react'; 2import ReactDOM from 'react-dom'; 3import { Table, Column } from 'sticky-react-table'; 4 5import data from './data.json'; 6 7class MyTable extends Component { 8 render() { 9 return ( 10 <Table data={data}> 11 <Column title="Name" width={200} dataKey="name" /> 12 <Column title="Age" width={50} dataKey="age" /> 13 <Column title="Occupation" width={200} dataKey="occupation" /> 14 <Column title="Location" width={150} dataKey="location" /> 15 <Column title="Top Skill" width={150} dataKey="topSkill" /> 16 </Table> 17 ); 18 } 19} 20 21const rootElement = document.getElementById('root'); 22ReactDOM.render(<MyTable />, rootElement);
From here on, you can customize the cell, row or header renderers, add custom classes, style it however you need.
If you use SASS as a pre-processor, two default themes are provided: light and dark. To use the themes, simply import the relevant theme.
- Light Theme:
sticky-react-table/lib/themes/light.scss - Dark Theme:
sticky-react-table/lib/themes/dark.scss
Important Properties
Sticky React Table supports a host of properties which allow you to completely customize the look and feel of the table. You can find the properties supported by the two major components of the package.
Table
Properties:
| Property | Type | Default | Description |
|---|---|---|---|
| children | Column | undefined | The Column component. It does not accept any other children. |
| fixed | Number | undefined | The number of fixed columns in the table. |
| rowSelection | Bool | true | This property determines whether checkbox column is rendered. |
| idKey | String | id | A key used to uniquely identify data. |
| rowClassName | String | undefined | Custom classes for a row. |
| headerClassName | String | undefined | Custom classes for the header row. |
| selectedRows | Array | undefined | An array of ids to make the table a controlled component. |
| infiniteScrollTotalCount | Number | undefined | Total number of rows which can be loaded using infinite loader. |
| infiniteScrollLoadMore | Function | undefined | Invoked when a new page is requested when using infinite loader. |
| infiniteScrollThreshold | Number | 10 | The number of rows before the end of the table to trigger a call. |
| infiniteScrollLoaderRowCount | Number | 5 | The number of additional rows to display at the bottom for loading. |
| infiniteScrollPageSize | Number | 30 | A number of rows loaded with each portion. |
| infiniteScrollCellRenderer | Node or Function | undefined | Custom content to display within cells of additional loader rows. |
Callbacks:
| Name | Description | Parameters |
|---|---|---|
| onSort | Pass a custom sorting functionality. | Array of column data |
| onRowCheck | Handle checking of a row. | Id of the checked row or "all" if all rows are checked. |
| checkboxRenderer | Custom renderer for checkbox column. | Cell Props |
| rowRenderer | Custom row renderer | Row Props |
| ref | Get ref of inner component. | Reference to inner component |
Column
Properties:
| Property | Type | Default | Description |
|---|---|---|---|
| dataKey | String | undefined | The data key for the value to be rendered into the cell |
| title | String | undefined | The title to be displayed in the header if no renderer is specified. |
| width | Number | 0 | The absolute width of the column. |
| className | Array or String | undefined | A custom class for the cell. |
| alwaysVisible | Bool | false | Defines whether the column should always be visible. |
| filterAlignment | String | left | Whether the filter should be aligned to the left or right of header cell. |
Callbacks:
| Name | Description | Parameters |
|---|---|---|
| cellRenderer | A custom cell renderer to modify the default rendering. | Cell Props |
| headerRenderer | A custom header cell renderer to modify the default rendering. | Cell Props |
| filterRenderer | A custom header filter renderer to add column filters. | Filter Props |
| filterTrigger | A custom header filter trigger renderer for showing the column filters. | None |
Cell Props
The cell props allow you to access the data for the entire row, and some additional information about the cell. This particularly helps in customizing the cell, based on the information or the data for that row.
Every custom render function you use across the table, ex. headerRenderer and cellRenderer, get these props as the parameters of the renderer.
1propTypes = {
2 id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
3 rowData: PropTypes.object,
4 cellData: PropTypes.any,
5 isChecked: PropTypes.bool
6 isCheckbox: PropTypes.bool,
7 style: PropTypes.object,
8 title: PropTypes.string, // Only available in headerRenderer
9 isAllSelected: PropTypes.bool // Only available in headerRenderer
10}Filter Props
The filter props allows you to access the data for the table and the dataKey of a column. This helps in creating a custom filters in any column, based on the data of the table.
1propTypes = {
2 data: PropTypes.array,
3 dataKey: PropTypes.string
4};Row Props
The row props allow you to access the data for the row, and some additional methods to help you render the defaults. Only the rowRenderer function gets access to row props.
1propTypes = {
2 id: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
3 rowIndex: PropTypes.number,
4 rowData: PropTypes.object,
5 columns: PropTypes.array,
6 isChecked: PropTypes.bool,
7 renderColumns: PropTypes.func,
8 defaultRowRenderer: PropTypes.func
9}Gotchas
- While using
headerRenderer, always render an inline element if you have either sorting or column filters in the cell. Otherwise the alignment will break.
Contributing
Since we are still developing and this is a fairly large project, we would ❤️ contributions! We are looking for people who echo our sentiments and share the same idea about Sticky React Table.
Check out the CONTRIBUTING.md file for details.
Issues
For any issues or queries you might have about the table, please feel free to create one in the issues section.
Roadmap
We started developing Sticky React Table due to a lot of issues we faced while implementing tables in our application, with React. Leading up to 1.0.0, we plan on supporting the following features:
- ✅ Fixed Columns
- ✅ Fixed Header
- ✅ Column Resizing
- ✅ Column Switching
- ✅ Column Reordering
- ✅ Column Sorting
- ✅ Column Filtering
- ✅ Cell Renderer
- ✅ Row Renderer
- ✅ Header Renderer
- ✅ Row Selection
- ✅ Infinite Scrolling
- ✅ Column resizing based on length of value (a la Excel)
- ❌ Keyboard Navigation (as per Gmail)
- ❌ More events:
- Key Up
- Key Down
- Focus
- Blur
- Scroll
In the future, we plan on implementing the following:
- Virtualization
- Better support for custom classes
Features at no point will we build:
- Row resizing or native subrow rendering (both of these can be achieved using a custom row renderer)
License
This project is under the MIT License. You can checkout the LICENSE file for info.
Copyright © 2018.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 1/26 approved changesets -- score normalized to 0
Reason
project is archived
Details
- Warn: Repository is archived.
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 5 are checked with a SAST tool
Reason
177 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-6chw-6frg-f759
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-42xw-2xvc-qx8m
- Warn: Project is vulnerable to: GHSA-4w2v-q235-vp99
- Warn: Project is vulnerable to: GHSA-cph5-m8f7-6c5x
- Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx
- Warn: Project is vulnerable to: GHSA-jr5f-v2jv-69x6
- Warn: Project is vulnerable to: GHSA-pp7h-53gx-mx7r
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
- Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
- Warn: Project is vulnerable to: GHSA-c6rq-rjc2-86v2
- Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-p28h-cc7q-c4fg
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-9j49-mfvp-vmhm
- Warn: Project is vulnerable to: GHSA-3wcq-x3mq-6r9p
- Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm
- Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2
- Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
- Warn: Project is vulnerable to: GHSA-j4f2-536g-r55m
- Warn: Project is vulnerable to: GHSA-r7qp-cfhv-p84w
- Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
- Warn: Project is vulnerable to: GHSA-3gx7-xhv7-5mx3
- Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
- Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
- Warn: Project is vulnerable to: MAL-2023-462
- Warn: Project is vulnerable to: GHSA-xf7w-r453-m56c
- Warn: Project is vulnerable to: GHSA-8mmm-9v2q-x3f9
- Warn: Project is vulnerable to: GHSA-q42p-pg8m-cqh6
- Warn: Project is vulnerable to: GHSA-w457-6q6x-cgp9
- Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f
- Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p
- Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv
- Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8
- Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65
- Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh
- Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44
- Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988
- Warn: Project is vulnerable to: GHSA-44pw-h2cw-w3vq
- Warn: Project is vulnerable to: GHSA-jp4x-w63m-7wgm
- Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m
- Warn: Project is vulnerable to: GHSA-6x33-pw7p-hmpq
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-pc5p-h8pf-mvwp
- Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546
- Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-282f-qqgm-c34q
- Warn: Project is vulnerable to: GHSA-7x7c-qm48-pq9c
- Warn: Project is vulnerable to: GHSA-rc3x-jf5g-xvc5
- Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574
- Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm
- Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-779f-wgxg-qr8f
- Warn: Project is vulnerable to: GHSA-82v2-mx6x-wq7q
- Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-fhjf-83wg-r2j9
- Warn: Project is vulnerable to: GHSA-4c7m-wxvm-r7gc
- Warn: Project is vulnerable to: GHSA-pch5-whg9-qr2r
- Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
- Warn: Project is vulnerable to: GHSA-92xj-mqp7-vmcj
- Warn: Project is vulnerable to: GHSA-wxgw-qj99-44c2
- Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
- Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
- Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
- Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
- Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
- Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
- Warn: Project is vulnerable to: GHSA-9v62-24cr-58cx
- Warn: Project is vulnerable to: GHSA-r8f7-9pfq-mjmv
- Warn: Project is vulnerable to: GHSA-48ww-j4fc-435p
- Warn: Project is vulnerable to: GHSA-hwqf-gcqm-7353
- Warn: Project is vulnerable to: GHSA-9h6g-pr28-7cqp
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-6fx8-h7jm-663j
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6
- Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-mvjj-gqq2-p4hw
- Warn: Project is vulnerable to: GHSA-35q2-47q7-3pc3
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-hjp8-2cm3-cc45
- Warn: Project is vulnerable to: GHSA-7mwh-4pqv-wmr8
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-h9rv-jmmf-4pgx
- Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-4g88-fppr-53pp
- Warn: Project is vulnerable to: GHSA-4jqc-8m5r-9rpr
- Warn: Project is vulnerable to: GHSA-fxwf-4rqh-v8g3
- Warn: Project is vulnerable to: GHSA-25hc-qcg6-38wj
- Warn: Project is vulnerable to: GHSA-xfhh-g9f5-x4m4
- Warn: Project is vulnerable to: GHSA-qm95-pgcg-qqfq
- Warn: Project is vulnerable to: GHSA-cqmj-92xf-r6r9
- Warn: Project is vulnerable to: GHSA-c9g6-9335-x697
- Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
- Warn: Project is vulnerable to: GHSA-j44m-qm6p-hp7m
- Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
- Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
- Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
- Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
- Warn: Project is vulnerable to: GHSA-f523-2f5j-gfcg
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
- Warn: Project is vulnerable to: GHSA-xc7v-wxcw-j472
- Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v
- Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx
- Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p
- Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
- Warn: Project is vulnerable to: GHSA-cf4h-3jhx-xvhq
- Warn: Project is vulnerable to: GHSA-46c4-8wrp-j99v
- Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442
- Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc
- Warn: Project is vulnerable to: GHSA-rqff-837h-mm52
- Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2
- Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
- Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
- Warn: Project is vulnerable to: GHSA-mgfv-m47x-4wqp
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-cf66-xwfp-gvc4
- Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
- Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
- Warn: Project is vulnerable to: GHSA-g78m-2chm-r7qv
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-72mh-269x-7mh5
- Warn: Project is vulnerable to: GHSA-h4j5-c7cj-74xg
- Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
- Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
Score
2
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More