React - Table with expanding rows
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 - 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'));
Developer | Anthony Young |
Username | ayoungh |
Uploaded | October 31, 2022 |
Rating | 3 |
Size | 6,773 Kb |
Views | 10,120 |
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!
Name | Size |
Tags and searching etc | 5,929 Kb |
Drop down sidebar | 2,616 Kb |
Keypress check mobile | 1,492 Kb |
Pagination effect for images | 3,003 Kb |
JS Countdown Timer | 2,435 Kb |
SVG | 1,670 Kb |
Anthony Young - ayoungh.co.uk Material Design mashup | 5,216 Kb |
Yourorderhub.co.uk | 91,604 Kb |
A Pen by Anthony Young | 1,658 Kb |
Exit Intention JS | 2,356 Kb |
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!
Name | Username | Size |
STIKHOI | Denmch | 7,122 Kb |
ECharts Version 3.0 - Bar Marker Chart | WebCodePro | 2,726 Kb |
Sass Radar | Jlong | 6,887 Kb |
Codero Sitemap | S1m0ne | 28,169 Kb |
Multicolumns 2 | Raphaelgoetter | 1,857 Kb |
HTM5 picture dropzone | Jaysalvat | 2,576 Kb |
Contact | GanNichiHa | 2,514 Kb |
Under construction | GhostRider | 1,642 Kb |
CSS Hover Effects | Alen | 3,613 Kb |
CSS3 Media Queries demo | Machal | 1,824 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!