@kyawthihasoe/react-datagrid

React DataGrid

A customizable React DataGrid component with sorting and pagination capabilities.

Installation

npm install @kyawthihasoe/react-datagrid
# or
yarn add @kyawthihasoe/react-datagrid

Usage

import { DataGrid } from '@kyawthihasoe/react-datagrid';

const columns = [
  { field: 'id', headerName: 'ID', width: 100 },
  { field: 'name', headerName: 'Name', sortable: true },
  { field: 'age', headerName: 'Age', sortable: true },
];

const rows = [
  { id: 1, name: 'John Doe', age: 30 },
  { id: 2, name: 'Jane Smith', age: 25 },
  // ... more rows
];

function App() {
  return (
    <DataGrid
      columns={columns}
      rows={rows}
      pageSize={10}
    />
  );
}

Features

• Sortable columns
• Pagination
• Customizable column widths
• Responsive design
• TypeScript support

Props

Prop	Type	Required	Default	Description
columns	Column[]	Yes	-	Array of column definitions
rows	any[]	Yes	-	Array of data objects
pageSize	number	No	10	Number of rows per page

Column Definition

interface Column {
  field: string;      // Field name in the data object
  headerName: string; // Display name for the column
  width?: number;     // Optional column width
  sortable?: boolean; // Whether the column is sortable
}

License

MIT