JSFiddle - React, Tailwind, and code Playground

HTML

<html>

<head>
    <title>bukatu</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <!-- CSS datatables from https://datatables.net/download/ [Bootstrap4, DataTables] -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.20/datatables.min.css" />
</head>

<body>
    <div class="container-fluid bg-light" style="min-height: 100vh">
        <div class="container">
            <div class="row">
                <div class="col my-3">
                    <h3>Title</h3>
                    <button type="button" class="btn btn-primary my-3">Button</button>
                    <table id="myTable" class="table table-hover table-striped" style="width:100%"></table>
                </div>             
            </div>
        </div>
    </div>

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <!-- CSS datatables from https://datatables.net/download/ [Bootstrap4, DataTables] -->
    <script src="https://cdn.datatables.net/v/bs4/dt-1.10.20/datatables.min.js"></script>
    <!-- page specific scripts -->
</body>

</html>

JavaScript

var dataset = [
    {
        column1: "xxx",
        column2: "xxx",
        column3: "xxx",
        column4: "xxx"
    },
    {
        column1: "xxx",
        column2: "xxx",
        column3: "xxx",
        column4: "xxx"
    },
    {
        column1: "xxx",
        column2: "xxx",
        column3: "xxx",
        column4: "xxx"
    },
        {
        column1: "xxx",
        column2: "xxx",
        column3: "xxx",
        column4: "xxx"
    },
        {
        column1: "xxx",
        column2: "xxx",
        column3: "xxx",
        column4: "xxx"
    },
];

$(document).ready(function () {
        $('#myTable').DataTable({
            paging: true,
            lengthChange: false,
            ordering: false,
            pagingType: "simple",
            language: {
                search: "Buscar:",
                zeroRecords: "Zero resultados",
                emptyTable: "Zero resultados",
                info: "_START_-_END_ de _TOTAL_ resultados",
                paginate: {
                    next: ">>>",
                    previous: "<<<",
                },
            },
            data: dataset,

            columns: [
                { title: "col1", data: "column1" },
                { title: "col2", data: "column2", },
                { title: "col3", data: "column3" },
                { title: "col4", data: "column4" },
            ],
        });
});