File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
    
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.css" rel="stylesheet">
    
    <link href="https://cdn.datatables.net/2.0.7/css/dataTables.bootstrap5.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-5-theme/1.3.0/select2-bootstrap-5-theme.min.css" rel="stylesheet" />    
    <link href="https://cdn.datatables.net/buttons/3.0.2/css/buttons.bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/datetime/1.5.2/css/dataTables.dateTime.css" rel="stylesheet">
    <link href="https://editor.datatables.net/extensions/Editor/css/editor.bootstrap5.min.css" rel="stylesheet" /> 
    <link href="https://cdn.datatables.net/responsive/3.0.2/css/responsive.bootstrap5.css" rel="stylesheet">
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" />
​
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>    
    <script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.full.min.js"></script>        
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.js"></script>    
    <script src="https://cdn.datatables.net/2.0.7/js/dataTables.js"></script>
    <script src="https://cdn.datatables.net/2.0.7/js/dataTables.bootstrap5.js"></script>   
    <script src="https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js"></script>
    <script src="https://editor.datatables.net/extensions/Editor/js/editor.bootstrap5.js"></script>
    <script src="https://cdn.datatables.net/buttons/3.0.2/js/dataTables.buttons.js"></script>    
    <script src="https://cdn.datatables.net/buttons/3.0.2/js/buttons.bootstrap5.js"></script>    
    <script src="https://cdn.datatables.net/datetime/1.5.2/js/dataTables.dateTime.js"></script>        
    <script src="https://cdn.datatables.net/responsive/3.0.2/js/dataTables.responsive.js"></script>
    <script src="https://cdn.datatables.net/responsive/3.0.2/js/responsive.bootstrap5.js"></script>
    <script src="https://cdn.datatables.net/select/2.0.1/js/dataTables.select.js"></script>
​
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table id="example" class="table table-sm" width="100px">
      </table>
    </div>
  </body>
</html>
​
CSSSaved
 
/* Select 2 bootstrap-5 theme override */
/* TODO move back to sleect2.css */
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection {
  background-color: transparent !important;
  border: 1px solid #495057;
}
​
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
​
  html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: #dee2e6 !important;
  }
​
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
  color: #dee2e6 !important;
}
​
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
  border: 1px solid var(--bs-gray-600);
}
​
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder {
  color: #dee2e6 !important;
}
​
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
  background-color: transparent !important;
  color: #dee2e6 !important;
}
​
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown {
  color: #dee2e6 !important;
  border: 1px solid #495057 !important;
  background-color: var(--bs-body-bg);
}
​
  html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[role=group] .select2-results__group {
    color: var(--bs-secondary-color) !important;
  }
​
JavaScriptSaved
 
​
const dataSet = [
    [1, 'Tiger Nixon', 'System Architect', 'Edinburgh', '5421', '2011/04/25', '$320,800'],
    [2, 'Garrett Winters', 'Accountant', 'Tokyo', '8422', '2011/07/25', '$170,750'],
    [3, 'Ashton Cox', 'Junior Technical Author', 'San Francisco', '1562', '2009/01/12', '$86,000'],
    [4, 'Cedric Kelly', 'Senior Javascript Developer', 'Edinburgh', '6224', '2012/03/29', '$433,060'],
    [5, 'Airi Satou', 'Accountant', 'Tokyo', '5407', '2008/11/28', '$162,700'],
];
      
new DataTable('#example', {
    data: dataSet,
    responsive: true,
    columns: [
        { title: 'Id' },
  
        { title: 'Name' },
  
        { title: 'Title' },
  
        { title: 'Location' },
  
        { title: 'Numbers' },
  
        { title: 'Date' },
  
        { title: 'Salary' },
        { 
            title: 'Name',
  defaultContent: '',
            render: function() {
                return $("<span>Hello World</span>").get(0);
            },
        },  
    ],
    select: true
});
1 warning
Line 2: 'const' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers