JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Tab Content Headers -->
        <ul id="tabstrip" class="nav nav-tabs" role="tablist">
            <li class="active"><a href="#dvdksStoredetails" role="tab" data-toggle="tab">Type 1 Stores</a></li>
            <li><a href="#dvfsStoredetails" role="tab" data-toggle="tab">Type 2 Stores</a></li>
            <li><a href="#dvggStoredetails" role="tab" data-toggle="tab">Type 3 Stores</a></li>
        </ul>

        <!-- Tab Content Containers -->
        <div id="tabcontent" class="tab-content">
            <div class="tab-pane fade in active" id="dvdksStoredetails">@Html.Partial("dksstoresList", Model)</div>
            <div class="tab-pane fade" id="dvfsStoredetails">@Html.Partial("fsstoresList", Model)</div>
            <div class="tab-pane fade" id="dvggStoredetails">@Html.Partial("ggstoresList", Model)</div>
        </div>

CSS

<script src="~/Scripts/jquery-3.1.1.min.js"></script>

<script src="~/DatePicker/js/bootstrap-datepicker.min.js" type="text/javascript"></script>
<link href="~/DatePicker/css/bootstrap-datepicker.css" rel="stylesheet" />
<link href="~/DatePicker/css/bootstrap-datepicker3.css" rel="stylesheet" />
<link href="~/DatePicker/css/bootstrap-datepicker3.standalone.css" rel="stylesheet" />



<script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>

<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

JavaScript

$(document).ready(function () {

       $('#dksplanTable').dataTable({
            scrollY: 300,
            "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
            "sort": false,
            "searching": false,
            'searchable': false,
            'orderable': false,
            columnDefs: [{
                orderable: false
            }],
            select: {
                style: 'os',
                selector: 'td:first-child'
            },
            order: [[1, 'asc']]
        });
        $('#fsplanTable').dataTable({
            scrollY: 300,
            "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
            "sort": false,
            "searching": false,
            'searchable': false,
            'orderable': false,
            columnDefs: [{
                orderable: false
            }],
            select: {
                style: 'os',
                selector: 'td:first-child'
            },
            order: [[1, 'asc']]
        });
             
                   
        $('#ggplanTable').dataTable({
            scrollY: 300,
            "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
            "sort": false,
            "searching": false,
            'searchable': false,
            'orderable': false,
            columnDefs: [{
                orderable: false
            }],
            select: {
                style: 'os',
                selector: 'td:first-child'
            },
            order: [[1, 'asc']]
        });
        $('#ggplanTable').on('shown.bs.collapse', function () {
            $.fn.dataTable.tables({ visible: true, api: true }).columns.adjust();
        });
       

        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            $($.fn.dataTable.tables(true)).DataTable()
               .columns.adjust();
        });
        
         });