
Research
Security News
The Growing Risk of Malicious Browser Extensions
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
react-data-grid
Advanced tools
react-data-grid is a powerful and feature-rich data grid component for React applications. It provides a wide range of functionalities for displaying, editing, and managing data in a tabular format. It is highly customizable and supports various features such as sorting, filtering, grouping, and more.
Basic Grid
This code demonstrates a basic data grid with three columns: ID, Title, and Count. It displays two rows of data.
import React from 'react';
import ReactDataGrid from 'react-data-grid';
const columns = [
{ key: 'id', name: 'ID' },
{ key: 'title', name: 'Title' },
{ key: 'count', name: 'Count' }
];
const rows = [
{ id: 0, title: 'Example', count: 20 },
{ id: 1, title: 'Demo', count: 40 }
];
function BasicGrid() {
return <ReactDataGrid columns={columns} rows={rows} />;
}
export default BasicGrid;
Editable Grid
This code demonstrates an editable data grid where users can edit the values in the cells. The changes are reflected in the grid's state.
import React from 'react';
import ReactDataGrid from 'react-data-grid';
const columns = [
{ key: 'id', name: 'ID', editable: true },
{ key: 'title', name: 'Title', editable: true },
{ key: 'count', name: 'Count', editable: true }
];
const rows = [
{ id: 0, title: 'Example', count: 20 },
{ id: 1, title: 'Demo', count: 40 }
];
function EditableGrid() {
const [gridRows, setGridRows] = React.useState(rows);
const onGridRowsUpdated = ({ fromRow, toRow, updated }) => {
const updatedRows = gridRows.slice();
for (let i = fromRow; i <= toRow; i++) {
updatedRows[i] = { ...updatedRows[i], ...updated };
}
setGridRows(updatedRows);
};
return (
<ReactDataGrid
columns={columns}
rows={gridRows}
onRowsUpdate={onGridRowsUpdated}
/>
);
}
export default EditableGrid;
Sortable Grid
This code demonstrates a sortable data grid where users can sort the rows by clicking on the column headers. The sorting direction can be ascending or descending.
import React from 'react';
import ReactDataGrid from 'react-data-grid';
const columns = [
{ key: 'id', name: 'ID', sortable: true },
{ key: 'title', name: 'Title', sortable: true },
{ key: 'count', name: 'Count', sortable: true }
];
const rows = [
{ id: 0, title: 'Example', count: 20 },
{ id: 1, title: 'Demo', count: 40 }
];
function SortableGrid() {
const [gridRows, setGridRows] = React.useState(rows);
const [sortColumn, setSortColumn] = React.useState(null);
const [sortDirection, setSortDirection] = React.useState(null);
const onGridSort = (column, direction) => {
const sortedRows = [...gridRows].sort((a, b) => {
if (direction === 'ASC') {
return a[column] > b[column] ? 1 : -1;
} else if (direction === 'DESC') {
return a[column] < b[column] ? 1 : -1;
} else {
return 0;
}
});
setGridRows(sortedRows);
setSortColumn(column);
setSortDirection(direction);
};
return (
<ReactDataGrid
columns={columns}
rows={gridRows}
onGridSort={onGridSort}
sortColumn={sortColumn}
sortDirection={sortDirection}
/>
);
}
export default SortableGrid;
ag-grid-react is a feature-rich data grid component for React applications. It offers a wide range of functionalities including sorting, filtering, grouping, and more. It is highly customizable and supports large datasets efficiently. Compared to react-data-grid, ag-grid-react provides more advanced features and better performance for large datasets.
react-table is a lightweight and flexible data table component for React. It provides basic functionalities such as sorting, filtering, and pagination. It is highly customizable and easy to use. Compared to react-data-grid, react-table is more lightweight and easier to integrate but may lack some advanced features.
material-table is a data table component for React based on Material-UI. It provides functionalities such as sorting, filtering, grouping, and more. It is highly customizable and integrates well with Material-UI components. Compared to react-data-grid, material-table offers a more modern and visually appealing design but may have a steeper learning curve.
================== Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like http://adazzle.github.io/react-data-grid/
FAQs
Feature-rich and customizable data grid React component
The npm package react-data-grid receives a total of 121,343 weekly downloads. As such, react-data-grid popularity was classified as popular.
We found that react-data-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
Security News
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
Research
Security News
An in-depth analysis of credential stealers, crypto drainers, cryptojackers, and clipboard hijackers abusing open source package registries to compromise Web3 development environments.
Security News
pnpm 10.12.1 introduces a global virtual store for faster installs and new options for managing dependencies with version catalogs.