Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, {Component} from "react";
- import PropTypes from "prop-types";
- import {
- Table,
- TableBody,
- TableHeader,
- TableHeaderColumn,
- TableRow,
- TableRowColumn
- } from "material-ui/Table";
- import Dialog from "@material-ui/core/Dialog";
- export const RowParser = row => {
- const reg = /"(.*?)"/g;
- const matches = row.match(reg);
- if (matches) {
- return matches.map(value => {
- return value.substr(1, value.length - 2);
- });
- }
- return row.split(",");
- };
- class CSVTable extends Component {
- constructor(props) {
- super(props);
- const {data, header} = this.props;
- const rows = [...data.split("n")];
- const contentRows = header ? rows.slice(1,rows.length) : rows;
- this.state = {
- open: false,
- title: '',
- contentRows: contentRows
- };
- }
- handleClickOpen=(rowIndex)=> {
- // Do whatever you want with the row data
- const rowData = this.state.contentRows[rowIndex];
- console.log(rowData);
- this.setState({
- open:true
- })
- };
- handleClose = () => {
- this.setState({open: false});
- };
- static propTypes = {
- data: PropTypes.string.isRequired,
- header: PropTypes.bool
- };
- static defaultProps = {
- data: "",
- header: false,
- };
- rowParser = row => {
- return RowParser(row);
- };
- render() {
- const {data, header} = this.props;
- const rows = [...data.split("n")];
- const contentRows = header ? rows.slice(1,rows.length) : rows;
- return (
- <div>
- <Table>
- {header && (
- <TableHeader adjustForCheckbox={false} displaySelectAll={false}>
- <TableRow>
- {this.rowParser(rows[0]).map((value, index) => (
- <TableHeaderColumn key={index}>{value}</TableHeaderColumn>
- ))}
- </TableRow>
- </TableHeader>
- )}
- <TableBody displayRowCheckbox={false}>
- {contentRows.map((row, rowIndex) => (
- <TableRow key={rowIndex} onDoubleClick={this.handleClickOpen}>
- {this.rowParser(row).map((value, colIndex) => (
- <TableRowColumn key={colIndex} data={value}
- style={{cursor: 'pointer'}}>{value}
- </TableRowColumn>
- ))}
- <button type="button" id ={rowIndex}
- onClick={() => this.handleClickOpen(rowIndex)}>
- Edit
- </button>
- </TableRow>
- ))}
- <Dialog open={this.state.open}
- onClose={this.handleClose} maxWidth={"md"} maxHeight={"md"}>
- <div style={{ width: '400px',
- height: '500px',
- margin: '55px'}}>
- {header &&(
- <TableHeader adjustForCheckbox={false} displaySelectAll={false}>
- <TableRow>
- {this.rowParser(rows[0]).map((value, index) => (
- <tr key={index}>{value}</tr>
- ))}
- </TableRow>
- </TableHeader>
- )}
- </div>
- <div style={{cursor: 'pointer', margin: '-287px 150px 200px'}}>
- <TableRow>
- {this.rowParser(rows[1]).map((value, colIndex) => (
- <tr key={colIndex}>
- <input value={value}/>
- </tr>
- ))}
- </TableRow>
- </div>
- </Dialog>
- </TableBody>
- </Table>
- </div>
- );
- }
- }
- CSVTable.propTypes = {
- fullScreen: PropTypes.bool.isRequired,
- };
- export default CSVTable;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement