Frontend

Hello everyone, earlier we have developed a react table view solution for frozen column, if you missed the post please find it here : https://reactcodes.blogspot.com/2019/11/react-fixed-table-header-code-without.html Today we will try to make the table header fixed but make the data vertically scrollable, below demo shows how the final result will be : To get the full codebase you may see my github link : https://github.com/reactcodes/react-sticky-table Explanation of process : Initially if you clone the codebase within App.js you will see that I have separated table header items and put those in an array const tableHeaders = [ "First Column", "Second Column", "Third Column", "Fourth Column", "Fifth Column", "Sixth Column", "Seventh Column", "Eight Column", ] Then I have the table data coming as a json I have the stickytableheader ...

Hello everyone ,today we are going to implement tableview with fixed column without using any external library. So let's start : I have initiated a react project and created two files, FixedColumnTable.js for logic and FixedColumnTable.css for holding styles. And called the same component in project's App.js FixedColumnTable.js import React, { Component } from 'react' import './FixedColumnTable.css' class FixedCoulmnTable extends Component { constructor(props) { super (props) this .state = { fixedHeaders : this .props.headers.slice( 0 , this .props.frozen), regularHeaders : this .props.headers.slice( this .props.frozen, this .props.headers.length) } } componentDidMount(){ console.log( this .props.headers.slice( 0 , this .props.frozen)) console.log( this .props.headers.slice( this .props.frozen, this .props.headers.length)) } addTd = (arr) =>{ return ...