Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
material-table
Advanced tools
Datatable for React based on https://material-ui.com/api/table/ with additional features
A console application that contains a lof of features to help developer
$ npm install material-table --save
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import MaterialTable from 'material-table'
class App extends Component {
render() {
return (
<div style={{maxWidth: '100%'}}>
<MaterialTable
columns={[
{title: 'Adı', field: 'name'},
{title: 'Soyadı', field: 'surname'},
{title: 'Doğum Yılı', field: 'birthYear', isNumeric: true},
{title: 'Doğum Yeri', field: 'birthCity', lookup: {34: 'İstanbul', 63: 'Şanlıurfa'}}
]}
data={[{name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63}]}
title="Demo Title"
/>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('react-div'));
Property | Type | Default | Description |
---|---|---|---|
actions | Array | Action list. An icon button will be rendered for each actions | |
columns | Array | Column definitions | |
data | Array | Data to be rendered | |
options | object | All options of table | |
title | string | 'Table Title' | Table Title (only render if toolbar option is true |
Field | Type | Default | Description |
---|---|---|---|
icon | string | Icon of button from material icons | |
onClick | func | This event will be fired when button clicked. Parameters are event and row or rows | |
tooltip | string | Tooltip for button |
Field | Type | Default | Description |
---|---|---|---|
hidden | boolean | false | Flag for hide column |
isNumeric | boolean | false | Flag for render data as numeric |
field | string | Field name of data row | |
lookup | object | Key value pair for lookup render data from | |
render | func | Render a custom node for cell. Parameter is rowData and return value must be ReactElement | |
title | string | Header text |
Data must be array of objects which has fields defined in columns. For example:
const data=[
{name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63},
{name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34},
]
Options property could be given to component as options
property. You can change behaviour of grid.
Field | Type | Default | Description |
---|---|---|---|
columnsButton | boolean | false | Flag for columns button that controls which column could be rendered |
filtering | boolean | false | Flag for filtering row |
paging | boolean | true | Flag for paging feature |
pageSize | numeric | 5 | Number of rows that would be rendered on every page |
pageSizeOptions | array | [5, 10, 20] | Page size options that could be selected by user |
search | boolean | true | Flag for search feature |
selection | boolean | false | Flag for selection feature |
toolbar | boolean | true | Flag for toolbar |
This project is licensed under the terms of the MIT license.
FAQs
Datatable for React based on https://material-ui.com/api/table/ with additional features
The npm package material-table receives a total of 45,513 weekly downloads. As such, material-table popularity was classified as popular.
We found that material-table demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers 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
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.