Render custom element in react table footer

Question

I'm currently working on react table. So, I have a column of checkboxes, I have even maintained the count of my checkboxes. I just want to render the count of rows selected you can say or number of checkboxes checked in react table footer near pagination. Any sort of help will be appreciated. Thanks in advance

Answer 1

Have a state variable number_of_checked_checkboxes. Increase/Decrease it's value based on the checkboxes checked.

constructor(props) {
    super(props);
    this.state = {number_of_checked_checkboxes: 0}
}

handleCheckBoxClick(e) {
    if (e.target.checked)
        this.setState({number_of_checked_checkboxes: this.state.number_of_checked_checkboxes + 1})
    else
        this.setState({number_of_checked_checkboxes: this.state.number_of_checked_checkboxes - 1})
}

render() {
    const {number_of_checked_checkboxes} = this.state;
    return (
        <div>
            {/* your table + pagination code goes here */}
            <input type="checkbox" onClick={this.handleCheckBoxClick}/>
            {/* your table + pagination code goes here */}
            <div className={'checkbox-counter'}>{number_of_checked_checkboxes}</div>
        </div>
    );
}

Hope this helps.

Answer 2

After doing lot of RND on react table I wasn't able to figure out how to achieve custom element rendering via React Table props. So, at the end I used traditional javascript or jquery DOM manipulation technique.

In componentDidMount I appended element where I wanted but text will not change dynamically, Therefore I did that in my method where I'm checking my checkboxes. See that method below:

componentDidMount() {
        let parentDiv = document.getElementsByClassName('-pagination');
        let pageClass = document.getElementsByClassName('select-wrap');
        let elementToAppend = document.createElement('div')
        elementToAppend.id = 'sel'
        let textNode = document.createTextNode(`${this.state.checkItems.length} row selected`)
        elementToAppend.appendChild(textNode);
        pageClass[0].insertAdjacentElement("beforebegin", elementToAppend)
    }

And where I checked my checkboxes I changed the text of that element:

singleChange = (employeeId, event) => {
        let checkedItems = this.state.checkItems;
        if (event.target.checked) {
            checkedItems.push(employeeId);
        }
        else {
            if (checkedItems.includes(employeeId)) {
                let index = checkedItems.indexOf(employeeId);
                checkedItems.splice(index, 1);
            }
        }
        checkedItems.length == this.props.employees.length ? this.setState({ allChecked: true }) : this.setState({ allChecked: false })
        this.setState({ checkItems: checkedItems })
        //this.appendElements();
        document.getElementById('sel').innerHTML = this.state.checkItems.length <= 1 ? `${this.state.checkItems.length} row selected` : `${this.state.checkItems.length} rows selected`;

    }