React Fixed Column Table code without external library

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 arr.map((e,index) => (
            <td key={index}>{e}</td>
        ))
    }
    renderFrozenTd = (arr) =>{
        const sliceArr = arr.slice(0,this.state.fixedHeaders.length)
        return sliceArr.map((e,index) => (
            <td key={index}>{e}</td>
        ))
    }
    renderFrozen = (arr) =>{
        return arr.map((e,index) => {
            return <tr key={index}>{this.renderFrozenTd(e)}</tr>
        })
    }
    renderReularTd = (arr) =>{
        const sliceArr = arr.slice(this.state.fixedHeaders.length,arr.length)
        return sliceArr.map((e,index) => (
            <td key={index}>{e}</td>
        ))
    }
    renderReular = (arr) =>{
        return arr.map((e,index) => {
            return <tr key={index}>{this.renderReularTd(e)}</tr>
        })
    }
    render() {
        return (
            <div className="container">
            <table className="fixed">
                <thead>
                <tr>
                    {this.addTd(this.state.fixedHeaders)}
                </tr>
                </thead>
                <tbody>
                {this.renderFrozen(this.props.data)}
                </tbody>
            </table>
            <div className="scroll">
            <table className="scrollable">
                <thead>
                <tr>
                    {this.addTd(this.state.regularHeaders)}
                </tr>
                </thead>
                <tbody>
                {this.renderReular(this.props.data)}
                </tbody>
            </table>
                </div>
            </div>
        )
    }
}

export default FixedCoulmnTable

FixedColumnTable.css

.container{
    display:flex;
  }
  .scroll{
    width: 200px;
    overflow-x: scroll;
  }
  .fixed{
    border-spacing: 0;
  }
  .fixed thead tr{
    background-color:#f07e7e;
    height: 30px;
  }
  .scrollable thead tr{
    background-color:#f07e7e;
    height: 30px;
  }
  
  .scrollable thead{
    background-color:#f07e7e;
  }
  .scrollable{
    width:100px;
    border-spacing: 0;
  }
  td{
    min-width:150px !important;
    border: 1px solid #221111;
  }
  
  

App.js

import React from 'react';

import FixedColumnTable from './FixedColumnTable'
const tableHeaders = [
    "Frozen First Column",
    "Frozen Second Column",
    "Reg First Column",
    "Reg Second Column",
    "Reg Third Column",
    "Reg Fourth Column",
    "Reg Fifth Column",
    "Reg Sixth Column"
]
const tableData = [
  [
    '1a',
    '2a',
    '3a',
    '4a',
    '5a',
    '6a',
    '7a',
    '8a',
  ],
  [
    '1b',
    '2b',
    '3b',
    '4b',
    '5b',
    '6b',
    '7b',
    '8b',
  ],
  [
    '1a',
    '2a',
    '3a',
    '4a',
    '5a',
    '6a',
    '7a',
    '8a',
  ],
  [
    '1b',
    '2b',
    '3b',
    '4b',
    '5b',
    '6b',
    '7b',
    '8b',
  ],
]
class App extends React.Component {
  
  render(){
  return (
    <FixedColumnTable headers={tableHeaders} data={tableData} frozen={2} />
  );
  }
}

export default App;

For cloning the codebase : https://github.com/reactcodes/react-table-fixed-column

You may also like :

React Table Sticky Header without external library