
Research
Malicious fezbox npm Package Steals Browser Passwords from Cookies via Innovative QR Code Steganographic Technique
A malicious package uses a QR code as steganography in an innovative technique.
qbs-react-grid
Advanced tools
A React table component.
[![npm][npm-badge]][npm] [![GitHub Actions][actions-svg]][actions-home] [![Coverage Status][coverage-badge]][coverage]
npm i rsuite-table --save
import { Table, Column, HeaderCell, Cell } from 'rsuite-table';
import 'rsuite-table/lib/less/index.less'; // or 'rsuite-table/dist/css/rsuite-table.css'
const dataList = [
{ id: 1, name: 'a', email: 'a@email.com', avartar: '...' },
{ id: 2, name: 'b', email: 'b@email.com', avartar: '...' },
{ id: 3, name: 'c', email: 'c@email.com', avartar: '...' }
];
const ImageCell = ({ rowData, dataKey, ...rest }) => (
<Cell {...rest}>
<img src={rowData[dataKey]} width="50" />
</Cell>
);
const App = () => (
<Table data={dataList}>
<Column width={100} sortable fixed resizable>
<HeaderCell>ID</HeaderCell>
<Cell dataKey="id" />
</Column>
<Column width={100} sortable resizable>
<HeaderCell>Name</HeaderCell>
<Cell dataKey="name" />
</Column>
<Column width={100} sortable resizable>
<HeaderCell>Email</HeaderCell>
<Cell>
{(rowData, rowIndex) => {
return <a href={`mailto:${rowData.email}`}>{rowData.email}</a>;
}}
</Cell>
</Column>
<Column width={100} resizable>
<HeaderCell>Avartar</HeaderCell>
<ImageCell dataKey="avartar" />
</Column>
</Table>
);
<Table>
Property | Type (Default) | Description |
---|---|---|
affixHeader | boolean,number | Affix the table header to the specified position on the page |
affixHorizontalScrollbar | boolean,number | Affix the table horizontal scrollbar to the specified position on the page |
autoHeight | boolean | The height of the table will be automatically expanded according to the number of data rows, and no vertical scroll bar will appear |
bordered | boolean | Show border |
cellBordered | boolean | Show cell border |
data * | object[] | Table data |
defaultExpandAllRows | boolean | Expand all nodes By default |
defaultExpandedRowKeys | string[] | Specify the default expanded row by rowkey |
defaultSortType | enum: 'desc', 'asc' | Sort type |
expandedRowKeys | string[] | Specify the default expanded row by rowkey (Controlled) |
fillHeight | boolean | Force the height of the table to be equal to the height of its parent container. Cannot be used together with autoHeight. |
headerHeight | number(40) | Table Header Height |
height | number(200) | Table height |
hover | boolean (true) | The row of the table has a mouseover effect |
isTree | boolean | Show as Tree table |
loading | boolean | Show loading |
locale | object: { emptyMessage: ('No data') , loading: ('Loading...') } | Messages for empty data and loading states |
minHeight | number (0) | Minimum height |
onExpandChange | (expanded:boolean,rowData:object)=>void | Tree table, the callback function in the expanded node |
onRowClick | (rowData:object, event: SyntheticEvent)=>void | Click the callback function after the row and return to rowDate |
onRowContextMenu | (rowData:object, event: SyntheticEvent)=>void | Invoke the callback function on contextMenu and pass the rowData |
onScroll | (scrollX:object, scrollY:object)=>void | Callback function for scroll bar scrolling |
onSortColumn | (dataKey:string, sortType:string)=>void | Click the callback function of the sort sequence to return the value sortColumn , sortType |
renderEmpty | (info: React.ReactNode) => React.ReactNode | Customized data is empty display content |
renderLoading | (loading: React.ReactNode) => React.ReactNode | Customize the display content in the data load |
renderRow | (children?: ReactNode, rowData?: RowDataType) => ReactNode | Custom row element |
renderRowExpanded | (rowDate?: Object) => React.ReactNode | Customize what you can do to expand a zone |
renderTreeToggle | (icon:node,rowData:object,expanded:boolean)=> node | Tree table, the callback function in the expanded node |
rowClassName | string , (rowData:object, rowIndex:number)=>string | Add an optional extra class name to row |
rowExpandedHeight | number (100) | Set the height of an expandable area |
rowHeight | number(46) , (rowData: object) => number | Row height |
rowKey | string ('key') | Each row corresponds to the unique key in data |
rtl | boolean | Right to left |
shouldUpdateScroll | boolean,(event)=>({x,y}) (true) | Use the return value of shouldUpdateScroll to determine whether to update the scroll after the table size is updated. |
showHeader | boolean (true) | Display header |
sortColumn | string | Sort column name ˝ |
sortType | enum: 'desc', 'asc' | Sort type (Controlled) |
virtualized | boolean | Effectively render large tabular data |
width | number | Table width |
wordWrap | boolean,'break-all','break-word','keep-all' | Whether to appear line breaks where text overflows its content box. |
<Column>
Property | Type (Default) | Description |
---|---|---|
align | enum: 'left','center','right' | Alignment |
colSpan | number | Merges column cells to merge when the dataKey value for the merged column is null or undefined . |
fixed | boolean, 'left', 'right' | Fixed column |
flexGrow | number | Set the column width automatically adjusts, when set flexGrow cannot set resizable and width property |
minWidth | number(200) | When you use flexGrow , you can set a minimum width by minwidth |
onResize | (columnWidth?: number, dataKey?: string) => void | Callback after column width change |
resizable | boolean | Customizable Resize Column width |
rowSpan | (rowData: any) => number | Merges rows on the specified column. |
sortable | boolean | Sortable |
treeCol | boolean | A column of a tree. |
verticalAlign | enum: 'top', 'middle', 'bottom' | Vertical alignment |
width | number | Column width |
fullText | boolean | Whether to display the full text of the cell content when the mouse is hovered |
sortable
is used to define whether the column is sortable, but depending on whatkey
sort needs to set adataKey
inCell
. The sort here is the service-side sort, so you need to handle the logic in the ' Onsortcolumn ' callback function of<Table>
, and the callback function returnssortColumn
,sortType
values.
<ColumnGroup>
Property | Type (Default) | Description |
---|---|---|
align | enum: 'left','center','right' | Alignment |
fixed | boolean, 'left', 'right' | Fixed column |
groupHeaderHeight | number | The height of the header of the merged cell group. The default value is 50% of the table headerHeight |
header | React.ReactNode | Group header |
verticalAlign | enum: 'top', 'middle', 'bottom' | Vertical alignment |
<HeaderCell>
Property | Type (Default) | Description |
---|---|---|
children | React.ReactNode | The table column header displays the content |
renderSortIcon | (sortType) => React.ReactNode | Custom render sort icons on column headers |
<Cell>
Property | Type (Default) | Description |
---|---|---|
dataKey | string | Data binding key , but also a sort of key |
rowData | object | Row data |
rowIndex | number | Row number |
<Cell>
, as follows:dataKey
.<Column width="{100}" align="center">
<HeaderCell>Name</HeaderCell>
<Cell dataKey="name" />
</Column>
<Cell>
.const NameCell = ({ rowData, ...props }) => (
<Cell {...props}>
<a href={`mailto:${rowData.email}`}>{rowData.name}<a>
</Cell>
);
<Column width={100} align="center">
<HeaderCell>Name</HeaderCell>
<NameCell />
</Column>
<Cell>
.<Column width={100} align="center">
<HeaderCell>Name</HeaderCell>
<Cell>
{(rowData, rowIndex) => {
return <a href={`mailto:${rowData.email}`}>{rowData.name}</a>;
}}
</Cell>
</Column>
FAQs
A React table component
The npm package qbs-react-grid receives a total of 48 weekly downloads. As such, qbs-react-grid popularity was classified as not popular.
We found that qbs-react-grid demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
A malicious package uses a QR code as steganography in an innovative technique.
Research
/Security News
Socket identified 80 fake candidates targeting engineering roles, including suspected North Korean operators, exposing the new reality of hiring as a security function.
Application Security
/Research
/Security News
Socket detected multiple compromised CrowdStrike npm packages, continuing the "Shai-Hulud" supply chain attack that has now impacted nearly 500 packages.