JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css"rel="stylesheet"></style>
    </head>
    <body>
        <div class="container" ng-app="formvalid">
            <div class="panel" data-ng-controller="validationCtrl">
              <div class="panel-heading border">
                <h2>Data table using jquery datatable in Angularjs
              </h2>
              </div>
              <div class="panel-body" ng-init="onInt(false)">
              
             <table cellspacing="0" id="example" class="table table-striped table-bordered datatable dataTable no-footer table-responsive-lg" role="grid" aria-describedby="DataTables_Table_0_info" style="border-collapse: collapse !important"> 
                 
                  <thead ng-init="init()">
                    <tr>
                        <th>Name</th>
                      <th>Remarks</th>
                      <th>ModifiedOn</th>
                      <th>ModifiedBy</th>
                      <th>Action</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr ng-repeat="n in data">
                      <td>{{n.PostName}}</td>
                      <td>{{n.Remarks}}</td>
                      <td>{{n.ModifiedOn}}</td>
                      <td>{{n.ModifiedBy}}</td>
                      
                      <td><button class="btn btn-danger" ng-click="deleteRecord(n.PostId)">Delete</button></td>
                    </tr>
                  </tbody>
                  
                  
                </table>
              </div>
            </div>
          </div>
    </body>
  
    
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
    <script...

JavaScript

var app1=angular.module('formvalid', ['ui.bootstrap','ui.utils']);
    app1.controller('validationCtrl',function($scope){
                               
   			  
    
    $scope.onInt = function(reload){

			if(reload){
            $('#example').DataTable().rows().invalidate('dom');
           $('#example').DataTable().draw(true);
        }else{

            angular.element(document).ready(function () {
                var table = $('#example').DataTable({
            "language": { "lengthMenu": "Show Records _MENU_ " },
                        "pagingType": "full_numbers",
                        "infoEmpty": "No records available"
                    });	
          
            });
        }
     
    }
    
     $scope.deleteRecord = function(id){
        var indx = $scope.data.findIndex(d=>d.PostId == id);
        //$scope.data= $scope.data.splice(indx , 1);
        //$scope.onInt(true);
        $('#example').DataTable().row(indx).remove().draw();
    }
      $scope.data =[
  {
    "PostId": 1,
    "PostName": "Nurse",
    "Remarks": "test remarks",
    "IsEnabled": true,
    "ModifiedOn": "29/02/2020 16:14:04",
    "ModifiedBy": "Mr. Abdul Rehman QB",
    "$$hashKey": "object:4"
  },
  {
    "PostId": 3,
    "PostName": "Doctor",
    "Remarks": "New Designation Updated",
    "IsEnabled": true,
    "ModifiedOn": "13/03/2020 16:10:03",
    "ModifiedBy": "Mr. Abdul Rehman QB",
    "$$hashKey": "object:5"
  },
  {
    "PostId": 4,
    "PostName": "Care off",
    "Remarks": "New Remarks Updating Once",
    "IsEnabled": true,
    "ModifiedOn": "29/03/2020 23:53:42",
    "ModifiedBy": "MR Admin Admin",
    "$$hashKey": "object:6"
  },
  {
    "PostId": 16,
    "PostName": "COVID-CARE (123)",
    "Remarks": "COVID-CARE (123)",
    "IsEnabled": true,
    "ModifiedOn": "21/03/2020 15:01:37",
    "ModifiedBy": "Mr. Abdul Rehman QB",
    "$$hashKey": "object:7"
  },
  {
    "PostId": 19,
    "PostName": "New Desgn",
    "Remarks": "New Desgn",
    "IsEnabled": true,
  ...