{
- renderCell(row: Row, column: Column) {
- const style: CSSProperties = {};
- if (column.width) {
- style.flexGrow = column.width;
- }
-
- if (column.textAlign) {
- style.textAlign = column.textAlign;
- }
-
- if (column.overflow) {
- style.overflow = column.overflow;
- }
-
- return (
-
- {row.cells[column.field]}
-
- );
- }
-
- render() {
- const cells = this.props.columns.map((col) => this.renderCell(this.props.row, col));
- return (
-
- {cells}
-
- );
- }
+type DataGridCellProps = {
+ column: Column;
+ row: Row;
}
-export default DataGridRow;
+const DataGridCell = ({row, column}: DataGridCellProps) => {
+ const style: CSSProperties = {};
+ if (column.width) {
+ style.flexGrow = column.width;
+ }
+
+ if (column.textAlign) {
+ style.textAlign = column.textAlign;
+ }
+
+ if (column.overflow) {
+ style.overflow = column.overflow;
+ }
+
+ return (
+
+ {row.cells[column.field]}
+
+ );
+};
+
+const DataGridRow = ({row, columns}: DataGridRowProps) => {
+ const cells = columns.map((column, index) => (
+
+ ));
+ return (
+
+ {cells}
+
+ );
+};
+
+export default React.memo(DataGridRow);