File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
​
    <link href="https://nightly.datatables.net/css/dataTables.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/dataTables.js"></script>
​
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table id="example" class="display nowrap" width="100%"></table>
    </div>
  </body>
</html>
​
CSSSaved
 
.redText { color: red }
​
.greenText { color: green }
JavaScriptSaved
 
var myData = [
  {
    "description": "Transaction 1",
    "debit" : 32,
    "credit" : 0
  },
  {
    "description": "Transaction 2",
    "debit" : 0,
    "credit" : 22
  },
  {
    "description": "Transaction 3",
    "debit" : 11,
    "credit" : 0
  },
  {
    "description": "Transaction 4",
    "debit" : 15,
    "credit" : 0
  }  
];
​
var table = new DataTable(
  '#example',
  {
    data: myData,
    columns: [
      {
        data: "description",
        title: "Description"
      },
      {
        data: "debit",
        title: "Debit",
        className: "redText"
      },
      {
        data: "credit",
        title: "Credit",
        className: "greenText"
      }
     ]
  }
);
​
​
Output 300px

This bin was created anonymously and its free preview time has expired. Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers