How to Use Data Tables with React JS Functional Components ? There are no any documentation

ankitpanchal15

I'm Impress with Data Tables which is provide best Responsive and I want to use in React JS but i did not get any documentation.

colin

The best is to search the web as there are plenty of resources out there, such as this Medium post,

Colin

ankitpanchal15

I have checked that Medium Post, but it is not an updated post, it was Published in Jan 2017, and I want to use it with the latest version. Now React Updated and I want to use in Functional Component React JS.

mohsin106

I was able to get App.js converted to a functional component like this:

import React from "react"
import { TblFunc } from "./TblFunc"

export default function AppFunc() {
  const dataSet = [
    ["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800"],
    ["Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750"],
    ["Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000"]
  ]
  return (
    <div>
      <TblFunc data={dataSet} />
    </div>
  )
}

But my TblFunc.js file is still using Class Component like this:

import React, { Component } from "react"

const $ = require('jquery')
$.DataTable = require('datatables.net')

export class TblFunc extends Component {
    componentDidMount() {
        console.log(this.el)
        this.$el = $(this.el)
        this.$el.DataTable(
            {
                data: this.props.data,
                columns: [
                    { title: "Name"},
                    { title: "Position"},
                    { title: "Office"},
                    { title: "Extn."},
                    { title: "Start data"},
                    { title: "Salary"}
                ]
            }
        )
    }

    componentWillUnmount() {

    }

    render() {
        return <div>
            <table className="display" width="100%" ref = { el => this.el = el}></table>
        </div>
    }
}

I'm trying to use the useEffect and useRef hooks to convert TblFunc.js to a functional component but not having any luck. Hopefully, someone can figure it out and let us all know.

mohsin106

Actually, I think I may have figured it out. The only this is you need to hardcode your table ID that Datables will reference. I put it in a variable called "tableName". I have useRef in the code below but it doesn't work. Would be ideal to get useRef to work and reference the table instead of using id={tableName}

I was able to get this to work:

import React, { useEffect, useRef } from "react"
import $ from 'jquery'

export function TblFunc(props) {

$.DataTable = require('datatables.net')
const tableRef = useRef()
// console.log(tableRef)
const tableName = "table1"

useEffect(() => {
    console.log(tableRef.current)
    const table = $(`#${tableName}`).DataTable(
        {
            data: props.data,
                columns: [
                    { title: "Name"},
                    { title: "Position"},
                    { title: "Office"},
                    { title: "Extn."},
                    { title: "Start data"},
                    { title: "Salary"}
                ],
                destroy: true,  // I think some clean up is happening here
                searching: false
        }
    )
    // Extra step to do extra clean-up.
    return function() {
        console.log("Table destroyed")
        table.destroy()
    }
},[])
    return (
        <div>
            <table className="display" width="100%" id={tableName} ref={ tableRef }></table>
        </div>
        
    )
}

I followed this video which showed how to set up a Class Based Datatables component and then tried to convert everything to functional components. Still need to help with the referencing part so that we don't have to name our table IDs.

colin

@mohsin106 It looks like you missed the link for the video - could you post that, please, as it may be useful for other users.

Colin

allan

I'm not an expert by any means on React I'm afraid, but is tableRef.current the DOM table element? If so, you can use that ($(tableRef.current).DataTable(...)) to construct the table.

One very important point when using React is that you need it to not manipulate the table's DOM. You must let DataTables to that - since having two libraries trying to control the same DOM elements is only going to lead to disaster .

In Vue there is a v-once attribute for that - I presume there is something similar in React, but perhaps someone who knows more than me can say?

Allan

mohsin106

Whoops, my bad. Here is the link for the video.

mohsin106

@allan , thanks for the tip...it seems to have worked. I must not have been referencing the useRef reference properly earlier when it was not working. But now, the below code appears to be working and I don't have to hardcode the tableName.

import React, { useEffect, useRef } from "react"
import $ from 'jquery'

export function TblFunc(props) {

$.DataTable = require('datatables.net')
const tableRef = useRef()

useEffect(() => {
    console.log(tableRef.current)
    const table = $(tableRef.current).DataTable(
        {
            data: props.data,
                columns: [
                    { title: "Name"},
                    { title: "Position"},
                    { title: "Office"},
                    { title: "Extn."},
                    { title: "Start data"},
                    { title: "Salary"}
                ],
                destroy: true  // I think some clean up is happening here
        }
    )
    // Extra step to do extra clean-up.
    return function() {
        console.log("Table destroyed")
        table.destroy()
    }
},[])
    return (
        <div>
            <table className="display" width="100%" ref={ tableRef }></table>
        </div>
        
    )
}