React - Table with expanding rows

Developer
Size
6,773 Kb
Views
10,120

How do I make an react - table with expanding rows?

What is a react - table with expanding rows? How do you make a react - table with expanding rows? This script and codes were developed by Anthony Young on 31 October 2022, Monday.

React - Table with expanding rows Previews

React - Table with expanding rows - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>React - Table with expanding rows</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="main"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js'></script> <script src="js/index.js"></script>
</body>
</html>

React - Table with expanding rows - Script Codes CSS Codes

.container { height: 100vh; width: 100vw;
}
.container .topbox { height: 300px; background: #c8e0ec;
}
.container .table { position: relative; width: 100%; height: 100%;
}
.container .table .header { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; height: 30px; width: 100%; border-bottom: 1px solid #d3d3d3;
}
.container .table .header .shadow { position: absolute; top: 31px;
}
.container .table .header .hcol { display: flex; background-color: #e5e8eb; border-color: #DFDFDF; justify-content: space-between; padding: 0 7px; height: 30px; align-items: center; cursor: pointer; color: #1F384D; box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.5); width: 100%;
}
.container .table .header.fixed { background: #e5e8eb; z-index: 99; position: fixed; top: 0px;
}
.container .table .header.fixed .shadow { height: 3px; width: 100%; background: 0 0 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAECAYAAABP2FU6AAAAF0lEQVR4AWPUkNeSBhHCjJoK2twgFisAFagCCp3pJlAAAAAASUVORK5CYII=) repeat-x;
}
.container .table ul { list-style: none; padding: 0px; margin: 0px; position: absolute; top: 32px; width: 100%;
}
.container .table ul li { width: 100%; min-height: 83px; border-bottom: 1px solid #DFDFDF;
}
.container .table ul li .heading { display: flex; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; width: 100%; height: 83px; cursor: pointer; transition: background 0.5s;
}
.container .table ul li .heading .col { display: flex; align-items: center; width: 100%; padding: 0 10px; height: 83px; border-right: 1px solid #DFDFDF;
}
.container .table ul li .content { width: 100%; height: 0px; opacity: 0; transition: height 1s;
}
.container .table ul li.open .heading { background: #4d98bc; color: #ffffff;
}
.container .table ul li.open .heading .col { border: none;
}
.container .table ul li.open .content { height: 300px; opacity: 1;
}

React - Table with expanding rows - Script Codes JS Codes

"use strict";
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var store = { headerOffset: null
};
var data = [{ id: 0, name: "name 0", details: "details 0", state: "live"
}, { id: 1, name: "name 1", details: "details 1", state: "live"
}, { id: 2, name: "name 2", details: "details 2", state: "draft"
}, { id: 3, name: "name 3", details: "details 3", state: "live"
}, { id: 4, name: "name 4", details: "details 4", state: "live"
}, { id: 5, name: "name 5", details: "details 5", state: "live"
}, { id: 6, name: "name 6", details: "details 6", state: "live"
}, { id: 7, name: "name 7", details: "details 7", state: "live"
}, { id: 8, name: "name 8", details: "details 8", state: "live"
}, { id: 9, name: "name 9", details: "details 9", state: "live"
}, { id: 10, name: "name 10", details: "details 10", state: "live"
}];
var cols = [{ icon: "", label: "Order Number"
}, { icon: "", label: "Name"
}, { icon: "", label: "Details"
}, { icon: "", label: "State"
}];
var RowItem = function (_React$Component) { _inherits(RowItem, _React$Component); function RowItem() { _classCallCheck(this, RowItem); var _this = _possibleConstructorReturn(this, _React$Component.call(this)); _this.state = { open: false }; return _this; } RowItem.prototype.toggleRow = function toggleRow(e) { console.log('toggleRow'); this.setState({ open: !this.state.open }); }; RowItem.prototype.render = function render() { var classes = ''; if (this.state.open) { classes = 'open'; } return React.createElement( "li", { onClick: this.toggleRow.bind(this), className: classes }, React.createElement( "div", { className: "heading" }, React.createElement( "div", { className: "col" }, this.props.id ), React.createElement( "div", { className: "col" }, this.props.name ), React.createElement( "div", { className: "col" }, this.props.details ), " ", React.createElement( "div", { className: "col" }, this.props.state ) ), React.createElement(RowContent, { open: this.state.open }), this.props.children ); }; return RowItem;
}(React.Component);
;
var RowContent = function (_React$Component2) { _inherits(RowContent, _React$Component2); function RowContent() { _classCallCheck(this, RowContent); return _possibleConstructorReturn(this, _React$Component2.apply(this, arguments)); } RowContent.prototype.clicker = function clicker() {}; RowContent.prototype.render = function render() { var jsxhtml = React.createElement( "div", { className: "content", onClick: this.clicker.bind(this) }, "row content", this.props.children ); if (this.props.open) { jsxhtml = React.createElement( "div", { className: "content open", onClick: this.clicker.bind(this) }, "row content", this.props.children ); } return React.createElement( "div", null, jsxhtml ); }; return RowContent;
}(React.Component);
;
var Table = function (_React$Component3) { _inherits(Table, _React$Component3); function Table() { _classCallCheck(this, Table); var _this3 = _possibleConstructorReturn(this, _React$Component3.call(this)); _this3.state = { headerOffset: null, headerFixed: true }; return _this3; } // handleScroll(e) { // let scrollTop = e.srcElement.body.scrollTop; // console.log('scroll...', scrollTop, this.state.headerOffset); // this.setState({ // headerFixed: true // }); // } Table.prototype.componentDidMount = function componentDidMount() { // window.addEventListener('scroll', this.handleScroll.bind(this)); // THIS SEEMS THE ONLY PLACE WE CAN PICK UP THE REF FOR THE HEADER console.log('reactdom: ', ReactDOM.findDOMNode(this.refs.header)); store.headerOffset = ReactDOM.findDOMNode(this.refs.header).getBoundingClientRect().top; console.log('store:', store.headerOffset); // this.setState({headerOffset:ReactDOM.findDOMNode(this.refs.header)}); }; Table.prototype.render = function render() { var columns = this.props.columns.map(function (item, inx) { return React.createElement(HeaderColumn, { label: item.label }); }); //go through the rows var rows = this.props.data.map(function (item, inx) { return React.createElement(RowItem, item); }); var classes = 'header'; if (this.props.headerFixed) { classes = 'header fixed'; } return React.createElement( "div", { className: "table" }, this.props.children, React.createElement( "div", { className: classes, ref: "header" }, columns, React.createElement("div", { className: "shadow" }) ), React.createElement( "ul", null, rows ) ); }; return Table;
}(React.Component);
var HeaderColumn = function (_React$Component4) { _inherits(HeaderColumn, _React$Component4); function HeaderColumn() { _classCallCheck(this, HeaderColumn); return _possibleConstructorReturn(this, _React$Component4.call(this)); } HeaderColumn.prototype.render = function render() { return React.createElement( "div", { className: "hcol" }, this.props.label ); }; return HeaderColumn;
}(React.Component);
var App = function (_React$Component5) { _inherits(App, _React$Component5); function App() { _classCallCheck(this, App); var _this5 = _possibleConstructorReturn(this, _React$Component5.call(this)); _this5.state = { tableHeader: null, tableHeaderFixed: false }; return _this5; } App.prototype.handleScroll = function handleScroll(e) { // console.log(e); var scrollTop = e.srcElement.body.scrollTop; //HOW DO WE GET THE REFS HERE FOR THE ITEM OFFSET? //itemTranslate = Math.min(0, scrollTop/3 - 60); console.log('app scroll...', scrollTop, store.headerOffset); // console.log('reactdom: ', ReactDOM.findDOMNode(this.refs.header), this.refs); // console.log(ReactDOM.findDOMNode(this.refs.header)); if (scrollTop >= store.headerOffset) { this.setState({ tableHeaderFixed: true }); } else { this.setState({ tableHeaderFixed: false }); } }; App.prototype.componentDidMount = function componentDidMount() { console.log('app did mount'); window.addEventListener('scroll', this.handleScroll.bind(this)); //does not work from here... // console.log('reactdom: ', ReactDOM.findDOMNode(this.refs.header), this.refs); // this.setState({tableHeader:ReactDOM.findDOMNode(this.refs.header)}); }; App.prototype.render = function render() { return React.createElement( "div", { className: "container" }, React.createElement( "div", { className: "topbox" }, "This is maybe a top section..." ), React.createElement(Table, { data: data, columns: cols, headerFixed: this.state.tableHeaderFixed, scrollFn: "" }) ); }; return App;
}(React.Component);
;
React.render(React.createElement(App, null), document.querySelector('.main'));
React - Table with expanding rows - Script Codes
React - Table with expanding rows - Script Codes
Home Page Home
Developer Anthony Young
Username ayoungh
Uploaded October 31, 2022
Rating 3
Size 6,773 Kb
Views 10,120
Do you need developer help for React - Table with expanding rows?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Anthony Young (ayoungh) Script Codes
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!