HOC Archives - Drunk Coding

Thanks to Tanner Linsley have developed a great open source data-grid named react-table for ReacJs especially the react-table component. When working on a big project for my company and had been required to add-in a feature react-table that allows folding the columns.

So, I had developed a HOC for react-table for that feature and today, by writing this post I would like to share it with all the ReacJs developers.

FoldableTable HOC

FoldableTable is a HOC that make the columns are foldable. The reason I developed this HOC because when working on the real project related to the financial which display so many columns for validation and comparison.

So foldable columns allow users to temporary hidden the unwanted to columns so that they can focus on the data that they want to see.

How it works

import ReactTable from 'react-table'
import FoldableTableHOC from 'react-table/lib/hoc/foldableTable'

const FoldableTable = FoldableTableHOC(ReactTable);

class App extends Component {
  render() {
    return &lt;FoldableTable 
       data={/*you data*/} 
       columns={[/*your coluumns defination*/]}/&gt;
  }
}

export default App;

import ReactTable from 'react-table'

import FoldableTableHOC from 'react-table/lib/hoc/foldableTable'

const FoldableTable = FoldableTableHOC(ReactTable);

class App extends Component {

render() {

return <FoldableTable

data={/*you data*/}

columns={[/*your coluumns defination*/]}/>

}

export default App;

It will scan all the columns which foldable is true and apply the foldable column feature. This feature will work for both normal columns and header columns as samples below.

With Header Columns

render(){
  return <FoldableTable
           columns={[{
              Header: "Name",
              foldable: true,
              columns: [{
                  Header: "First Name",
                  accessor: "first_name"
                },{
                  Header: "Last Name",
                  accessor: "last_name"
                }]
             },{
              Header: "Info",
              foldable: true,
              columns: [{
                  Header: "Email",
                  accessor: "email"
                },{
                  Header: "Gender",
                  accessor: "gender"
               }]
            }]
        }/>
}

render(){

return <FoldableTable

columns={[{

Header: "Name",

foldable: true,

columns: [{

Header: "First Name",

accessor: "first_name"

},{

Header: "Last Name",

accessor: "last_name"

}]

},{

Header: "Info",

foldable: true,

columns: [{

Header: "Email",

accessor: "email"

},{

Header: "Gender",

accessor: "gender"

}]

}/>

}

With Normal Columns

render() {
    return <FoldableTable
        columns={[{
                Header: "First Name",
                accessor: "first_name"
            },
            {
                Header: "Last Name",
                accessor: "last_name",
                foldable: true,
            },
            {
                Header: "Email",
                accessor: "email",
                foldable: true,
            },{
                Header: "Gender",
                accessor: "gender",
                foldable: true,
            }]}></FoldableTable>
}

render() {

return <FoldableTable

columns={[{

Header: "First Name",

accessor: "first_name"

{

Header: "Last Name",

accessor: "last_name",

foldable: true,

{

Header: "Email",

accessor: "email",

foldable: true,

},{

Header: "Gender",

accessor: "gender",

foldable: true,

}]}></FoldableTable>

}

The FoldableTable is also fully compatible with existing HOCs, below is with selectTableHOC.

State management

If you would like to manage the state of FoldableTable, then add the following codes.

<span class="pl-en">render</span>() {
    <span class="pl-k">return</span> <span class="pl-k">&lt;</span>FoldableTable
        onFoldChange<span class="pl-k">=</span>{<span class="pl-smi">newFolded</span> <span class="pl-k">=&gt;</span> <span class="pl-c1">this</span>.<span class="pl-en">setState</span>(<span class="pl-smi">p</span> <span class="pl-k">=&gt;</span> { <span class="pl-k">return</span> { folded<span class="pl-k">: </span>newFolded } })}
       folded<span class="pl-k">=</span>{<span class="pl-c1">this</span>.<span class="pl-smi">state</span>.<span class="pl-smi">folded</span>}
       <span class="pl-k">/</span><span class="pl-k">&gt;
</span>}

render() {

return <FoldableTable

onFoldChange={newFolded => this.setState(p => { return { folded: newFolded } })}

folded={this.state.folded}

/>

}

Custom Components

There are two components shall be customized.

FoldIconComponent: to render the Icon of buttons.
FoldButtonComponent: to render the folding buttons for each Column. With default rendering as below.

<span class="pl-k">const</span> your<span class="pl-c1">FoldIconComponent</span> <span class="pl-k">=</span> ({ collapsed }) <span class="pl-k">=&gt;</span> {
   <span class="pl-c">//Render your Icon here
</span>}

<span class="pl-k">const</span> your<span class="pl-c1">FoldButtonComponent</span> <span class="pl-k">=</span> ({ header, collapsed, icon, onClick }) <span class="pl-k">=&gt;</span>{
   <span class="pl-c">//Render your button here.
</span>}

<span class="pl-en">render</span>() { 
<span class="pl-k">    return</span> <span class="pl-k">&lt;</span>FoldableTable 
        <span class="pl-c1">FoldIconComponent={this.yourFoldIconComponent}
        FoldButtonComponent={this.yourFoldButtonComponent}</span> <span class="pl-k">/</span><span class="pl-k">&gt;
</span>}

const yourFoldIconComponent = ({ collapsed }) => {

//Render your Icon here

}

const yourFoldButtonComponent = ({ header, collapsed, icon, onClick }) =>{

//Render your button here.

}

render() {

return <FoldableTable

FoldIconComponent={this.yourFoldIconComponent}

FoldButtonComponent={this.yourFoldButtonComponent} />

}

Source Code

you can download the FoldableTable source code and samples here.

The foldableTable HOC had been submitted to merge with react-table.org. Hopefully, it will be available soon.

Hope this library is useful to you.

Tag: HOC

The Foldable HOC for react-table.js.org

FoldableTable HOC

How it works

With Header Columns

With Normal Columns

State management

Custom Components

Source Code