A Pen by Nicolas Florth on CodePen.
Created
October 12, 2018 13:46
-
-
Save nicolasflorth/ad631e27a4eaba6eb6215713c6771432 to your computer and use it in GitHub Desktop.
ReactJS fixed table component with perfect-scrollbar
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .container |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| class FixedTable extends React.Component { | |
| constructor(props) { | |
| super(props) | |
| this.state = { | |
| items: props.items, | |
| sortingProp: 'id', | |
| sortingDirectionAsc: true | |
| } | |
| this.scrollSidebar = this.scrollSidebar.bind(this) | |
| this.scrollBodyListHeader = this.scrollBodyListHeader.bind(this) | |
| } | |
| componentDidMount() { | |
| var $fixedTableBodyList = React.findDOMNode(this.refs.fixedTableBodyList) | |
| Ps.initialize($fixedTableBodyList) | |
| $fixedTableBodyList.addEventListener('ps-scroll-y', this.scrollSidebar) | |
| $fixedTableBodyList.addEventListener('ps-y-reach-start', () => this.scrollSidebar({target: { scrollTop: 0 }})) | |
| $fixedTableBodyList.addEventListener('ps-scroll-x', this.scrollBodyListHeader) | |
| $fixedTableBodyList.addEventListener('ps-x-reach-start', () => this.scrollBodyListHeader({target: { scrollLeft: 0 }})) | |
| } | |
| componentWillReceiveProps(nextProps) { | |
| this.setState({ | |
| items: nextProps.items, | |
| sortingProp: 'id', | |
| sortingDirectionAsc: true | |
| }) | |
| } | |
| scrollSidebar(event) { | |
| React.findDOMNode(this.refs.sidebarList).style.top = `${-event.target.scrollTop}px` | |
| } | |
| scrollBodyListHeader(event) { | |
| React.findDOMNode(this.refs.bodyListHeader).style.left = `${-event.target.scrollLeft}px` | |
| } | |
| sortAsc(prop) { | |
| return this.state.items.sort((a, b) => { | |
| if (a[prop] > b[prop]) { | |
| return 1; | |
| } | |
| if (a[prop] < b[prop]) { | |
| return -1; | |
| } | |
| return 0; | |
| }) | |
| } | |
| sortDesc(prop) { | |
| return this.state.items.sort((a, b) => { | |
| if (a[prop] < b[prop]) { | |
| return 1; | |
| } | |
| if (a[prop] > b[prop]) { | |
| return -1; | |
| } | |
| return 0; | |
| }) | |
| } | |
| sortBy(prop) { | |
| if (prop === this.state.sortingProp) { | |
| if (this.state.sortingDirectionAsc) { | |
| this.setState({ | |
| sortingDirectionAsc: false, | |
| items: this.sortDesc(prop) | |
| }) | |
| return | |
| } else { | |
| this.setState({ | |
| sortingDirectionAsc: true, | |
| items: this.sortAsc(prop) | |
| }) | |
| return | |
| } | |
| } | |
| this.setState({ | |
| sortingProp: prop, | |
| sortingDirectionAsc: true, | |
| items: this.sortAsc(prop) | |
| }) | |
| } | |
| renderFixedList() { | |
| var items = this.state.items.map((i) => { | |
| return ( | |
| <div className="fixed-table__row"> | |
| <div className="fixed-table__col">{i.id}</div> | |
| </div> | |
| ) | |
| }) | |
| return ( | |
| <div ref="sidebarList" | |
| className="fixed-table__list fixed-table__list--fixed"> | |
| {items} | |
| </div> | |
| ) | |
| } | |
| renderList() { | |
| var items = this.state.items.map((i, index) => { | |
| return ( | |
| <div key={`details-row-${index}`} | |
| className="fixed-table__row"> | |
| <div className="fixed-table__col">{i.first_name}</div> | |
| <div className="fixed-table__col">{i.last_name}</div> | |
| <div className="fixed-table__col">{i.email}</div> | |
| <div className="fixed-table__col">{i.country}</div> | |
| <div className="fixed-table__col">{i.ip_address}</div> | |
| </div> | |
| ) | |
| }) | |
| return ( | |
| <div ref="fixedTableBodyList" | |
| onScroll="onBodyListScroll" | |
| className="fixed-table__list"> | |
| {items} | |
| </div> | |
| ) | |
| } | |
| render() { | |
| return ( | |
| <div className="fixed-table"> | |
| <div className="fixed-table__sidebar"> | |
| <div className="fixed-table__header"> | |
| <div className="fixed-table__th" | |
| onClick={this.sortBy.bind(this, 'id')}>Id</div> | |
| </div> | |
| <div className="fixed-table__scrollable-sidebar"> | |
| {this.renderFixedList()} | |
| </div> | |
| </div> | |
| <div className="fixed-table__body"> | |
| <div className="fixed-table__header"> | |
| <div ref="bodyListHeader" | |
| className="fixed-table__scrollable-header"> | |
| <div className="fixed-table__th" | |
| onClick={this.sortBy.bind(this, 'first_name')}>First Name</div> | |
| <div className="fixed-table__th" | |
| onClick={this.sortBy.bind(this, 'last_name')}>Last Name</div> | |
| <div className="fixed-table__th" | |
| onClick={this.sortBy.bind(this, 'email')}>Email</div> | |
| <div className="fixed-table__th" | |
| onClick={this.sortBy.bind(this, 'country')}>Country</div> | |
| <div className="fixed-table__th" | |
| onClick={this.sortBy.bind(this, 'ip_address')}>Ip Address</div> | |
| </div> | |
| </div> | |
| {this.renderList()} | |
| </div> | |
| </div> | |
| ) | |
| } | |
| } | |
| FixedTable.propTypes = { | |
| items: React.PropTypes.array.isRequired | |
| } | |
| var items = [ | |
| { | |
| "id": 1, | |
| "first_name": "Earl", | |
| "last_name": "Spencer", | |
| "email": "[email protected]", | |
| "country": "Vietnam", | |
| "ip_address": "230.102.136.72" | |
| }, { | |
| "id": 2, | |
| "first_name": "Laura", | |
| "last_name": "Lawrence", | |
| "email": "[email protected]", | |
| "country": "Czech Republic", | |
| "ip_address": "68.71.237.213" | |
| }, { | |
| "id": 3, | |
| "first_name": "Kathy", | |
| "last_name": "Schmidt", | |
| "email": "[email protected]", | |
| "country": "Philippines", | |
| "ip_address": "246.77.46.156" | |
| }, { | |
| "id": 4, | |
| "first_name": "Sandra", | |
| "last_name": "Price", | |
| "email": "[email protected]", | |
| "country": "Philippines", | |
| "ip_address": "222.226.217.225" | |
| }, { | |
| "id": 5, | |
| "first_name": "Kathleen", | |
| "last_name": "Hamilton", | |
| "email": "[email protected]", | |
| "country": "Indonesia", | |
| "ip_address": "141.207.162.250" | |
| }, { | |
| "id": 6, | |
| "first_name": "Terry", | |
| "last_name": "Jordan", | |
| "email": "[email protected]", | |
| "country": "France", | |
| "ip_address": "26.245.117.95" | |
| }, { | |
| "id": 7, | |
| "first_name": "Dorothy", | |
| "last_name": "Alvarez", | |
| "email": "[email protected]", | |
| "country": "Brazil", | |
| "ip_address": "123.0.246.196" | |
| }, { | |
| "id": 8, | |
| "first_name": "Shawn", | |
| "last_name": "Russell", | |
| "email": "[email protected]", | |
| "country": "Philippines", | |
| "ip_address": "195.254.254.142" | |
| }, { | |
| "id": 9, | |
| "first_name": "Kathryn", | |
| "last_name": "Matthews", | |
| "email": "[email protected]", | |
| "country": "Indonesia", | |
| "ip_address": "166.154.113.77" | |
| }, { | |
| "id": 10, | |
| "first_name": "Bruce", | |
| "last_name": "Cunningham", | |
| "email": "[email protected]", | |
| "country": "Indonesia", | |
| "ip_address": "197.245.199.148" | |
| }, { | |
| "id": 11, | |
| "first_name": "Michael", | |
| "last_name": "Wheeler", | |
| "email": "[email protected]", | |
| "country": "United States", | |
| "ip_address": "192.42.229.72" | |
| }, { | |
| "id": 12, | |
| "first_name": "Ronald", | |
| "last_name": "Nguyen", | |
| "email": "[email protected]", | |
| "country": "Vietnam", | |
| "ip_address": "141.69.176.157" | |
| }, { | |
| "id": 13, | |
| "first_name": "Gregory", | |
| "last_name": "Howell", | |
| "email": "[email protected]", | |
| "country": "Gambia", | |
| "ip_address": "7.51.22.138" | |
| }, { | |
| "id": 14, | |
| "first_name": "Samuel", | |
| "last_name": "Lane", | |
| "email": "[email protected]", | |
| "country": "Ivory Coast", | |
| "ip_address": "12.164.139.66" | |
| }, { | |
| "id": 15, | |
| "first_name": "Maria", | |
| "last_name": "Sims", | |
| "email": "[email protected]", | |
| "country": "Brazil", | |
| "ip_address": "133.30.25.179" | |
| }, { | |
| "id": 16, | |
| "first_name": "Earl", | |
| "last_name": "Price", | |
| "email": "[email protected]", | |
| "country": "China", | |
| "ip_address": "173.205.16.97" | |
| }, { | |
| "id": 17, | |
| "first_name": "Adam", | |
| "last_name": "Bennett", | |
| "email": "[email protected]", | |
| "country": "Guatemala", | |
| "ip_address": "56.244.244.49" | |
| }, { | |
| "id": 18, | |
| "first_name": "Paula", | |
| "last_name": "Richards", | |
| "email": "[email protected]", | |
| "country": "Mongolia", | |
| "ip_address": "185.252.56.17" | |
| }, { | |
| "id": 19, | |
| "first_name": "Nancy", | |
| "last_name": "Wood", | |
| "email": "[email protected]", | |
| "country": "Indonesia", | |
| "ip_address": "96.234.18.172" | |
| }, { | |
| "id": 20, | |
| "first_name": "Gloria", | |
| "last_name": "Lynch", | |
| "email": "[email protected]", | |
| "country": "Indonesia", | |
| "ip_address": "210.183.128.165" | |
| }, { | |
| "id": 21, | |
| "first_name": "Jonathan", | |
| "last_name": "Reyes", | |
| "email": "[email protected]", | |
| "country": "China", | |
| "ip_address": "36.52.151.160" | |
| }, { | |
| "id": 22, | |
| "first_name": "Keith", | |
| "last_name": "Dixon", | |
| "email": "[email protected]", | |
| "country": "Indonesia", | |
| "ip_address": "93.222.158.136" | |
| }, { | |
| "id": 23, | |
| "first_name": "Bonnie", | |
| "last_name": "Taylor", | |
| "email": "[email protected]", | |
| "country": "Poland", | |
| "ip_address": "231.103.233.94" | |
| }, { | |
| "id": 24, | |
| "first_name": "Benjamin", | |
| "last_name": "Meyer", | |
| "email": "[email protected]", | |
| "country": "Indonesia", | |
| "ip_address": "75.252.39.120" | |
| }, { | |
| "id": 25, | |
| "first_name": "Nancy", | |
| "last_name": "Harper", | |
| "email": "[email protected]", | |
| "country": "France", | |
| "ip_address": "209.40.72.145" | |
| }, { | |
| "id": 26, | |
| "first_name": "Bonnie", | |
| "last_name": "Fuller", | |
| "email": "[email protected]", | |
| "country": "Poland", | |
| "ip_address": "26.114.1.4" | |
| }, { | |
| "id": 27, | |
| "first_name": "Harold", | |
| "last_name": "King", | |
| "email": "[email protected]", | |
| "country": "Indonesia", | |
| "ip_address": "79.105.188.195" | |
| }, { | |
| "id": 28, | |
| "first_name": "Christopher", | |
| "last_name": "Bailey", | |
| "email": "[email protected]", | |
| "country": "Dominican Republic", | |
| "ip_address": "117.131.97.17" | |
| }, { | |
| "id": 29, | |
| "first_name": "Keith", | |
| "last_name": "Fields", | |
| "email": "[email protected]", | |
| "country": "Vietnam", | |
| "ip_address": "237.214.120.202" | |
| }, { | |
| "id": 30, | |
| "first_name": "Peter", | |
| "last_name": "Dixon", | |
| "email": "[email protected]", | |
| "country": "Philippines", | |
| "ip_address": "67.217.168.218" | |
| }, { | |
| "id": 31, | |
| "first_name": "Ruth", | |
| "last_name": "Wright", | |
| "email": "[email protected]", | |
| "country": "South Africa", | |
| "ip_address": "249.57.131.163" | |
| }, { | |
| "id": 32, | |
| "first_name": "Douglas", | |
| "last_name": "Reynolds", | |
| "email": "[email protected]", | |
| "country": "Japan", | |
| "ip_address": "240.174.178.216" | |
| }, { | |
| "id": 33, | |
| "first_name": "Kenneth", | |
| "last_name": "Ramos", | |
| "email": "[email protected]", | |
| "country": "Russia", | |
| "ip_address": "117.25.143.201" | |
| }, { | |
| "id": 34, | |
| "first_name": "Marie", | |
| "last_name": "Rogers", | |
| "email": "[email protected]", | |
| "country": "Nigeria", | |
| "ip_address": "41.158.245.248" | |
| }, { | |
| "id": 35, | |
| "first_name": "Carl", | |
| "last_name": "Scott", | |
| "email": "[email protected]", | |
| "country": "China", | |
| "ip_address": "21.83.136.139" | |
| }, { | |
| "id": 36, | |
| "first_name": "Irene", | |
| "last_name": "Anderson", | |
| "email": "[email protected]", | |
| "country": "Brazil", | |
| "ip_address": "84.233.26.131" | |
| }, { | |
| "id": 37, | |
| "first_name": "Melissa", | |
| "last_name": "Hunt", | |
| "email": "[email protected]", | |
| "country": "Bulgaria", | |
| "ip_address": "173.168.213.137" | |
| }, { | |
| "id": 38, | |
| "first_name": "Alice", | |
| "last_name": "Young", | |
| "email": "[email protected]", | |
| "country": "Indonesia", | |
| "ip_address": "134.140.230.201" | |
| }, { | |
| "id": 39, | |
| "first_name": "Roy", | |
| "last_name": "Nguyen", | |
| "email": "[email protected]", | |
| "country": "Venezuela", | |
| "ip_address": "93.242.135.199" | |
| }, { | |
| "id": 40, | |
| "first_name": "Stephen", | |
| "last_name": "Peterson", | |
| "email": "[email protected]", | |
| "country": "Poland", | |
| "ip_address": "77.112.61.62" | |
| }, { | |
| "id": 41, | |
| "first_name": "Jennifer", | |
| "last_name": "Stevens", | |
| "email": "[email protected]", | |
| "country": "Cyprus", | |
| "ip_address": "222.230.47.87" | |
| }, { | |
| "id": 42, | |
| "first_name": "Bonnie", | |
| "last_name": "Olson", | |
| "email": "[email protected]", | |
| "country": "Luxembourg", | |
| "ip_address": "78.249.94.64" | |
| }, { | |
| "id": 43, | |
| "first_name": "Clarence", | |
| "last_name": "Elliott", | |
| "email": "[email protected]", | |
| "country": "United Arab Emirates", | |
| "ip_address": "206.72.156.229" | |
| }, { | |
| "id": 44, | |
| "first_name": "Stephanie", | |
| "last_name": "Little", | |
| "email": "[email protected]", | |
| "country": "Russia", | |
| "ip_address": "136.194.119.185" | |
| }, { | |
| "id": 45, | |
| "first_name": "Gary", | |
| "last_name": "Lee", | |
| "email": "[email protected]", | |
| "country": "Indonesia", | |
| "ip_address": "13.19.220.149" | |
| }, { | |
| "id": 46, | |
| "first_name": "Jason", | |
| "last_name": "Bell", | |
| "email": "[email protected]", | |
| "country": "Indonesia", | |
| "ip_address": "195.228.137.209" | |
| }, { | |
| "id": 47, | |
| "first_name": "Joyce", | |
| "last_name": "Reid", | |
| "email": "[email protected]", | |
| "country": "Indonesia", | |
| "ip_address": "104.175.48.105" | |
| }, { | |
| "id": 48, | |
| "first_name": "Kelly", | |
| "last_name": "Fowler", | |
| "email": "[email protected]", | |
| "country": "Latvia", | |
| "ip_address": "113.197.93.142" | |
| }, { | |
| "id": 49, | |
| "first_name": "Mildred", | |
| "last_name": "Rose", | |
| "email": "[email protected]", | |
| "country": "Angola", | |
| "ip_address": "35.13.81.24" | |
| }, { | |
| "id": 50, | |
| "first_name": "Carolyn", | |
| "last_name": "Kelley", | |
| "email": "[email protected]", | |
| "country": "Russia", | |
| "ip_address": "49.106.226.150" | |
| }, { | |
| "id": 51, | |
| "first_name": "Dorothy", | |
| "last_name": "Gray", | |
| "email": "[email protected]", | |
| "country": "China", | |
| "ip_address": "39.174.154.152" | |
| }, { | |
| "id": 52, | |
| "first_name": "Ashley", | |
| "last_name": "Hamilton", | |
| "email": "[email protected]", | |
| "country": "Indonesia", | |
| "ip_address": "165.48.125.215" | |
| }, { | |
| "id": 53, | |
| "first_name": "Christina", | |
| "last_name": "Wilson", | |
| "email": "[email protected]", | |
| "country": "United States", | |
| "ip_address": "90.230.59.158" | |
| }, { | |
| "id": 54, | |
| "first_name": "Brian", | |
| "last_name": "Gibson", | |
| "email": "[email protected]", | |
| "country": "Poland", | |
| "ip_address": "73.196.138.88" | |
| }, { | |
| "id": 55, | |
| "first_name": "Melissa", | |
| "last_name": "Hamilton", | |
| "email": "[email protected]", | |
| "country": "Brazil", | |
| "ip_address": "121.223.226.93" | |
| }, { | |
| "id": 56, | |
| "first_name": "Lois", | |
| "last_name": "Brooks", | |
| "email": "[email protected]", | |
| "country": "Sudan", | |
| "ip_address": "174.244.229.178" | |
| }, { | |
| "id": 57, | |
| "first_name": "Ruth", | |
| "last_name": "Ryan", | |
| "email": "[email protected]", | |
| "country": "Japan", | |
| "ip_address": "74.204.71.244" | |
| }, { | |
| "id": 58, | |
| "first_name": "Carlos", | |
| "last_name": "Willis", | |
| "email": "[email protected]", | |
| "country": "Guyana", | |
| "ip_address": "7.19.210.176" | |
| }, { | |
| "id": 59, | |
| "first_name": "Alan", | |
| "last_name": "Hudson", | |
| "email": "[email protected]", | |
| "country": "Colombia", | |
| "ip_address": "155.147.144.218" | |
| }, { | |
| "id": 60, | |
| "first_name": "Randy", | |
| "last_name": "Armstrong", | |
| "email": "[email protected]", | |
| "country": "Norway", | |
| "ip_address": "85.159.27.247" | |
| }, { | |
| "id": 61, | |
| "first_name": "Paul", | |
| "last_name": "Johnson", | |
| "email": "[email protected]", | |
| "country": "Indonesia", | |
| "ip_address": "167.75.181.190" | |
| }, { | |
| "id": 62, | |
| "first_name": "Thomas", | |
| "last_name": "Dean", | |
| "email": "[email protected]", | |
| "country": "China", | |
| "ip_address": "73.180.174.153" | |
| }, { | |
| "id": 63, | |
| "first_name": "Ruby", | |
| "last_name": "Harper", | |
| "email": "[email protected]", | |
| "country": "Russia", | |
| "ip_address": "44.21.97.214" | |
| }, { | |
| "id": 64, | |
| "first_name": "Steve", | |
| "last_name": "Crawford", | |
| "email": "[email protected]", | |
| "country": "Peru", | |
| "ip_address": "158.221.255.226" | |
| }, { | |
| "id": 65, | |
| "first_name": "Joan", | |
| "last_name": "Montgomery", | |
| "email": "[email protected]", | |
| "country": "Brazil", | |
| "ip_address": "104.29.51.80" | |
| }, { | |
| "id": 66, | |
| "first_name": "Jeremy", | |
| "last_name": "Olson", | |
| "email": "[email protected]", | |
| "country": "Iran", | |
| "ip_address": "107.140.136.87" | |
| }, { | |
| "id": 67, | |
| "first_name": "Gerald", | |
| "last_name": "Edwards", | |
| "email": "[email protected]", | |
| "country": "China", | |
| "ip_address": "226.253.158.221" | |
| }, { | |
| "id": 68, | |
| "first_name": "Catherine", | |
| "last_name": "Garcia", | |
| "email": "[email protected]", | |
| "country": "Yemen", | |
| "ip_address": "219.178.84.170" | |
| }, { | |
| "id": 69, | |
| "first_name": "Beverly", | |
| "last_name": "Murphy", | |
| "email": "[email protected]", | |
| "country": "Netherlands", | |
| "ip_address": "147.244.20.231" | |
| }, { | |
| "id": 70, | |
| "first_name": "Earl", | |
| "last_name": "Warren", | |
| "email": "[email protected]", | |
| "country": "Brazil", | |
| "ip_address": "148.20.83.7" | |
| }, { | |
| "id": 71, | |
| "first_name": "Susan", | |
| "last_name": "Jackson", | |
| "email": "[email protected]", | |
| "country": "Indonesia", | |
| "ip_address": "78.110.255.106" | |
| }, { | |
| "id": 72, | |
| "first_name": "Joan", | |
| "last_name": "Gilbert", | |
| "email": "[email protected]", | |
| "country": "Indonesia", | |
| "ip_address": "73.35.252.106" | |
| }, { | |
| "id": 73, | |
| "first_name": "Sandra", | |
| "last_name": "Spencer", | |
| "email": "[email protected]", | |
| "country": "Colombia", | |
| "ip_address": "98.102.59.105" | |
| }, { | |
| "id": 74, | |
| "first_name": "Gary", | |
| "last_name": "Lane", | |
| "email": "[email protected]", | |
| "country": "Papua New Guinea", | |
| "ip_address": "161.255.25.207" | |
| }, { | |
| "id": 75, | |
| "first_name": "Sandra", | |
| "last_name": "Andrews", | |
| "email": "[email protected]", | |
| "country": "China", | |
| "ip_address": "47.4.88.237" | |
| }, { | |
| "id": 76, | |
| "first_name": "Albert", | |
| "last_name": "Williamson", | |
| "email": "[email protected]", | |
| "country": "China", | |
| "ip_address": "3.67.53.90" | |
| }, { | |
| "id": 77, | |
| "first_name": "Catherine", | |
| "last_name": "Chavez", | |
| "email": "[email protected]", | |
| "country": "Ukraine", | |
| "ip_address": "129.9.127.0" | |
| }, { | |
| "id": 78, | |
| "first_name": "Rachel", | |
| "last_name": "Reed", | |
| "email": "[email protected]", | |
| "country": "Iran", | |
| "ip_address": "224.52.52.15" | |
| }, { | |
| "id": 79, | |
| "first_name": "Jane", | |
| "last_name": "Cox", | |
| "email": "[email protected]", | |
| "country": "Russia", | |
| "ip_address": "161.209.248.211" | |
| }, { | |
| "id": 80, | |
| "first_name": "Larry", | |
| "last_name": "Bailey", | |
| "email": "[email protected]", | |
| "country": "Mongolia", | |
| "ip_address": "185.20.219.72" | |
| }, { | |
| "id": 81, | |
| "first_name": "Stephen", | |
| "last_name": "Lane", | |
| "email": "[email protected]", | |
| "country": "Czech Republic", | |
| "ip_address": "25.46.184.114" | |
| }, { | |
| "id": 82, | |
| "first_name": "Rachel", | |
| "last_name": "Lopez", | |
| "email": "[email protected]", | |
| "country": "Serbia", | |
| "ip_address": "217.77.106.129" | |
| }, { | |
| "id": 83, | |
| "first_name": "Janet", | |
| "last_name": "Castillo", | |
| "email": "[email protected]", | |
| "country": "Indonesia", | |
| "ip_address": "16.92.172.223" | |
| }, { | |
| "id": 84, | |
| "first_name": "Lawrence", | |
| "last_name": "Collins", | |
| "email": "[email protected]", | |
| "country": "Taiwan", | |
| "ip_address": "115.122.105.212" | |
| }, { | |
| "id": 85, | |
| "first_name": "Maria", | |
| "last_name": "Anderson", | |
| "email": "[email protected]", | |
| "country": "Kenya", | |
| "ip_address": "3.108.52.32" | |
| }, { | |
| "id": 86, | |
| "first_name": "Kimberly", | |
| "last_name": "Reid", | |
| "email": "[email protected]", | |
| "country": "Malta", | |
| "ip_address": "83.182.68.158" | |
| }, { | |
| "id": 87, | |
| "first_name": "Emily", | |
| "last_name": "Palmer", | |
| "email": "[email protected]", | |
| "country": "Saint Kitts and Nevis", | |
| "ip_address": "59.231.81.129" | |
| }, { | |
| "id": 88, | |
| "first_name": "Anne", | |
| "last_name": "Garcia", | |
| "email": "[email protected]", | |
| "country": "Tanzania", | |
| "ip_address": "161.161.115.32" | |
| }, { | |
| "id": 89, | |
| "first_name": "Ernest", | |
| "last_name": "Lewis", | |
| "email": "[email protected]", | |
| "country": "Russia", | |
| "ip_address": "19.155.142.237" | |
| }, { | |
| "id": 90, | |
| "first_name": "Lisa", | |
| "last_name": "Stewart", | |
| "email": "[email protected]", | |
| "country": "France", | |
| "ip_address": "107.218.126.7" | |
| }, { | |
| "id": 91, | |
| "first_name": "Ashley", | |
| "last_name": "Walker", | |
| "email": "[email protected]", | |
| "country": "Philippines", | |
| "ip_address": "186.170.170.167" | |
| }, { | |
| "id": 92, | |
| "first_name": "Aaron", | |
| "last_name": "Stevens", | |
| "email": "[email protected]", | |
| "country": "Bolivia", | |
| "ip_address": "188.215.233.65" | |
| }, { | |
| "id": 93, | |
| "first_name": "Pamela", | |
| "last_name": "Rogers", | |
| "email": "[email protected]", | |
| "country": "Brazil", | |
| "ip_address": "161.222.96.101" | |
| }, { | |
| "id": 94, | |
| "first_name": "Sandra", | |
| "last_name": "Carr", | |
| "email": "[email protected]", | |
| "country": "China", | |
| "ip_address": "157.236.176.224" | |
| }, { | |
| "id": 95, | |
| "first_name": "Jonathan", | |
| "last_name": "Ray", | |
| "email": "[email protected]", | |
| "country": "South Africa", | |
| "ip_address": "176.158.164.7" | |
| }, { | |
| "id": 96, | |
| "first_name": "Lisa", | |
| "last_name": "Simmons", | |
| "email": "[email protected]", | |
| "country": "Brazil", | |
| "ip_address": "134.195.9.79" | |
| }, { | |
| "id": 97, | |
| "first_name": "Daniel", | |
| "last_name": "Daniels", | |
| "email": "[email protected]", | |
| "country": "Egypt", | |
| "ip_address": "186.229.218.236" | |
| }, { | |
| "id": 98, | |
| "first_name": "Bobby", | |
| "last_name": "Webb", | |
| "email": "[email protected]", | |
| "country": "China", | |
| "ip_address": "126.126.138.87" | |
| }, { | |
| "id": 99, | |
| "first_name": "Christine", | |
| "last_name": "Dean", | |
| "email": "[email protected]", | |
| "country": "Greece", | |
| "ip_address": "168.12.135.232" | |
| }, { | |
| "id": 100, | |
| "first_name": "Sara", | |
| "last_name": "Roberts", | |
| "email": "[email protected]", | |
| "country": "Netherlands", | |
| "ip_address": "127.152.179.113" | |
| }] | |
| React.render( | |
| <FixedTable items={items} /> , | |
| document.querySelector('.container') | |
| ) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js"></script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.7/js/perfect-scrollbar.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $fixed-table-header-height: 28px; | |
| $fixed-table-col-width: 80px; | |
| .container { | |
| position: relative; | |
| margin: 20px auto; | |
| width: 500px; | |
| height: 80vh; | |
| } | |
| .fixed-table { | |
| position: relative; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .fixed-table__scrollable-sidebar { | |
| position: relative; | |
| height: 100%; | |
| top: $fixed-table-header-height; | |
| overflow: hidden; | |
| } | |
| .fixed-table__sidebar { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: $fixed-table-col-width * 2; | |
| height: 100%; | |
| } | |
| .fixed-table__sidebar .fixed-table__col { | |
| width: 100%; | |
| } | |
| .fixed-table__body { | |
| position: relative; | |
| margin-left: $fixed-table-col-width * 2; | |
| max-width: calc(100% - #{$fixed-table-col-width}); | |
| height: 100%; | |
| } | |
| .fixed-table__body .fixed-table__list { | |
| top: $fixed-table-header-height; | |
| } | |
| .fixed-table__list { | |
| position: relative; | |
| height: 100%; | |
| } | |
| .fixed-table__list--fixed { | |
| height: auto; | |
| overflow: visible; | |
| } | |
| .fixed-table__header { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: $fixed-table-header-height; | |
| overflow: hidden; | |
| border-bottom: 1px solid gray; | |
| } | |
| .fixed-table__scrollable-header { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| display: flex; | |
| flex-wrap: nowrap; | |
| } | |
| .fixed-table__th { | |
| flex-shrink: 0; | |
| width: $fixed-table-col-width; | |
| padding: 0 5px; | |
| } | |
| .fixed-table__row { | |
| width: 100%; | |
| display: flex; | |
| flex-wrap: nowrap; | |
| } | |
| .fixed-table__col { | |
| flex-shrink: 0; | |
| width: $fixed-table-col-width; | |
| white-space: nowrap; | |
| text-overflow: ellipsis; | |
| overflow: hidden; | |
| border-bottom: 1px solid gray; | |
| padding: 5px; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.7/css/perfect-scrollbar.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment