Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI
Light
Dark
System
Ask  Question

Metronic 9 Tailwind CSS Datatable Issue 



<div data-datatable="true" data-datatable-page-size="-1" id="test_datatable">
 <div class="scrollable-x-auto">
 <table class="table table-auto table-border text-center" data-datatable-table="true">
 <thead>
 <tr>
 <th class="w-[50px]">
 <span class="sort asc">
 <span class="sort-label">
 #
 </span>
 <span class="sort-icon">
 </span>
 </span>
 </th>
 <th class="w-[100px]">
 <span class="sort asc">
 <span class="sort-label">
 {{ "user.username_label" | trans }}
 </span>
 <span class="sort-icon">
 </span>
 </span>
 </th>
 <th class="w-[100px]">
 <span class="sort">
 <span class="sort-label">
 {{ "user.status_label" | trans }}
 </span>
 <span class="sort-icon">
 </span>
 </span>
 </th>
 <th class="w-[100px]">
 <span class="sort">
 <span class="sort-label">
 {{ "user.created_at_label" | trans }}
 </span>
 <span class="sort-icon">
 </span>
 </span>
 </th>
 <th class="w-[100px]">
 {{ "user.action_label" | trans }}
 </th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>
 1
 </td>
 <td>
 <span class="badge badge-dot size-2 bg-success">
 </span>
 </td>
 <td>
 6 Aug, 2024
 </td>
 <td>
 HR Dept
 </td>
 <td>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
 <i class="ki-outline ki-notepad-edit">
 </i>
 </a>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
 <i class="ki-filled ki-category">
 </i>
 </a>
 </td>
 </tr>
 <tr>
 <td>
 2
 </td>
 <td>
 <span class="badge badge-dot size-2 bg-success">
 </span>
 </td>
 <td>
 22 Jul 2024
 </td>
 <td>
 Guy Hawkins
 </td>
 <td>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
 <i class="ki-outline ki-notepad-edit">
 </i>
 </a>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
 <i class="ki-filled ki-category">
 </i>
 </a>
 </td>
 </tr>
 <tr>
 <td>
 3
 </td>
 <td>
 <span class="badge badge-dot size-2 bg-danger">
 </span>
 </td>
 <td>
 18 Jul, 2024
 </td>
 <td>
 Sales Dept
 </td>
 <td>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
 <i class="ki-outline ki-notepad-edit">
 </i>
 </a>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
 <i class="ki-filled ki-category">
 </i>
 </a>
 </td>
 </tr>
 <tr>
 <td>
 4
 </td>
 <td>
 <span class="badge badge-dot size-2 bg-success">
 </span>
 </td>
 <td>
 15 Jul, 2024
 </td>
 <td>
 Sales Dept
 </td>
 <td>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
 <i class="ki-outline ki-notepad-edit">
 </i>
 </a>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
 <i class="ki-filled ki-category">
 </i>
 </a>
 </td>
 </tr>
 <tr>
 <td>
 5
 </td>
 <td>
 <span class="badge badge-dot size-2 bg-warning">
 </span>
 </td>
 <td>
 30 Jul, 2024
 </td>
 <td>
 Legal Dept
 </td>
 <td>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
 <i class="ki-outline ki-notepad-edit">
 </i>
 </a>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
 <i class="ki-filled ki-category">
 </i>
 </a>
 </td>
 </tr>
 <tr>
 <td>
 6
 </td>
 <td>
 <span class="badge badge-dot size-2 bg-warning">
 </span>
 </td>
 <td>
 30 Jul, 2024
 </td>
 <td>
 Legal Dept
 </td>
 <td>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
 <i class="ki-outline ki-notepad-edit">
 </i>
 </a>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
 <i class="ki-filled ki-category">
 </i>
 </a>
 </td>
 </tr>
 <tr>
 <td>
 7
 </td>
 <td>
 <span class="badge badge-dot size-2 bg-warning">
 </span>
 </td>
 <td>
 30 Jul, 2024
 </td>
 <td>
 Legal Dept
 </td>
 <td>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
 <i class="ki-outline ki-notepad-edit">
 </i>
 </a>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
 <i class="ki-filled ki-category">
 </i>
 </a>
 </td>
 </tr>
 <tr>
 <td>
 8
 </td>
 <td>
 <span class="badge badge-dot size-2 bg-warning">
 </span>
 </td>
 <td>
 30 Jul, 2024
 </td>
 <td>
 Legal Dept
 </td>
 <td>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
 <i class="ki-outline ki-notepad-edit">
 </i>
 </a>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
 <i class="ki-filled ki-category">
 </i>
 </a>
 </td>
 </tr>
 <tr>
 <td>
 9
 </td>
 <td>
 <span class="badge badge-dot size-2 bg-warning">
 </span>
 </td>
 <td>
 30 Jul, 2024
 </td>
 <td>
 Legal Dept
 </td>
 <td>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
 <i class="ki-outline ki-notepad-edit">
 </i>
 </a>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
 <i class="ki-filled ki-category">
 </i>
 </a>
 </td>
 </tr>
 <tr>
 <td>
 10
 </td>
 <td>
 <span class="badge badge-dot size-2 bg-warning">
 </span>
 </td>
 <td>
 30 Jul, 2024
 </td>
 <td>
 Legal Dept
 </td>
 <td>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
 <i class="ki-outline ki-notepad-edit">
 </i>
 </a>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
 <i class="ki-filled ki-category">
 </i>
 </a>
 </td>
 </tr>
 <tr>
 <td>
 11
 </td>
 <td>
 <span class="badge badge-dot size-2 bg-warning">
 </span>
 </td>
 <td>
 30 Jul, 2024
 </td>
 <td>
 Legal Dept
 </td>
 <td>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
 <i class="ki-outline ki-notepad-edit">
 </i>
 </a>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
 <i class="ki-filled ki-category">
 </i>
 </a>
 </td>
 </tr>
 <tr>
 <td>
 12
 </td>
 <td>
 <span class="badge badge-dot size-2 bg-warning">
 </span>
 </td>
 <td>
 30 Jul, 2024
 </td>
 <td>
 Legal Dept
 </td>
 <td>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
 <i class="ki-outline ki-notepad-edit">
 </i>
 </a>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
 <i class="ki-filled ki-category">
 </i>
 </a>
 </td>
 </tr>
 <tr>
 <td>
 13
 </td>
 <td>
 <span class="badge badge-dot size-2 bg-warning">
 </span>
 </td>
 <td>
 30 Jul, 2024
 </td>
 <td>
 Legal Dept
 </td>
 <td>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
 <i class="ki-outline ki-notepad-edit">
 </i>
 </a>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
 <i class="ki-filled ki-category">
 </i>
 </a>
 </td>
 </tr>
 <tr>
 <td>
 14
 </td>
 <td>
 <span class="badge badge-dot size-2 bg-warning">
 </span>
 </td>
 <td>
 30 Jul, 2024
 </td>
 <td>
 Legal Dept
 </td>
 <td>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
 <i class="ki-outline ki-notepad-edit">
 </i>
 </a>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
 <i class="ki-filled ki-category">
 </i>
 </a>
 </td>
 </tr>
 <tr>
 <td>
 15
 </td>
 <td>
 <span class="badge badge-dot size-2 bg-warning">
 </span>
 </td>
 <td>
 30 Jul, 2024
 </td>
 <td>
 Legal Dept
 </td>
 <td>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
 <i class="ki-outline ki-notepad-edit">
 </i>
 </a>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
 <i class="ki-filled ki-category">
 </i>
 </a>
 </td>
 </tr>
 <tr>
 <td>
 16
 </td>
 <td>
 <span class="badge badge-dot size-2 bg-warning">
 </span>
 </td>
 <td>
 30 Jul, 2024
 </td>
 <td>
 Legal Dept
 </td>
 <td>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
 <i class="ki-outline ki-notepad-edit">
 </i>
 </a>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
 <i class="ki-filled ki-category">
 </i>
 </a>
 </td>
 </tr>
 <tr>
 <td>
 17
 </td>
 <td>
 <span class="badge badge-dot size-2 bg-warning">
 </span>
 </td>
 <td>
 30 Jul, 2024
 </td>
 <td>
 Legal Dept
 </td>
 <td>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
 <i class="ki-outline ki-notepad-edit">
 </i>
 </a>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
 <i class="ki-filled ki-category">
 </i>
 </a>
 </td>
 </tr>
 <tr>
 <td>
 18
 </td>
 <td>
 <span class="badge badge-dot size-2 bg-warning">
 </span>
 </td>
 <td>
 30 Jul, 2024
 </td>
 <td>
 Legal Dept
 </td>
 <td>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
 <i class="ki-outline ki-notepad-edit">
 </i>
 </a>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
 <i class="ki-filled ki-category">
 </i>
 </a>
 </td>
 </tr>
 <tr>
 <td>
 19
 </td>
 <td>
 <span class="badge badge-dot size-2 bg-warning">
 </span>
 </td>
 <td>
 30 Jul, 2024
 </td>
 <td>
 Legal Dept
 </td>
 <td>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
 <i class="ki-outline ki-notepad-edit">
 </i>
 </a>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
 <i class="ki-filled ki-category">
 </i>
 </a>
 </td>
 </tr>
 <tr>
 <td>
 20
 </td>
 <td>
 <span class="badge badge-dot size-2 bg-warning">
 </span>
 </td>
 <td>
 30 Jul, 2024
 </td>
 <td>
 Legal Dept
 </td>
 <td>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
 <i class="ki-outline ki-notepad-edit">
 </i>
 </a>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
 <i class="ki-filled ki-category">
 </i>
 </a>
 </td>
 </tr>
 <tr>
 <td>
 21
 </td>
 <td>
 <span class="badge badge-dot size-2 bg-warning">
 </span>
 </td>
 <td>
 30 Jul, 2024
 </td>
 <td>
 Legal Dept
 </td>
 <td>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
 <i class="ki-outline ki-notepad-edit">
 </i>
 </a>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
 <i class="ki-filled ki-category">
 </i>
 </a>
 </td>
 </tr>
 <tr>
 <td>
 22
 </td>
 <td>
 <span class="badge badge-dot size-2 bg-warning">
 </span>
 </td>
 <td>
 30 Jul, 2024
 </td>
 <td>
 Legal Dept
 </td>
 <td>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
 <i class="ki-outline ki-notepad-edit">
 </i>
 </a>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
 <i class="ki-filled ki-category">
 </i>
 </a>
 </td>
 </tr>
 <tr>
 <td>
 23
 </td>
 <td>
 <span class="badge badge-dot size-2 bg-warning">
 </span>
 </td>
 <td>
 30 Jul, 2024
 </td>
 <td>
 Legal Dept
 </td>
 <td>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
 <i class="ki-outline ki-notepad-edit">
 </i>
 </a>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
 <i class="ki-filled ki-category">
 </i>
 </a>
 </td>
 </tr>
 <tr>
 <td>
 24
 </td>
 <td>
 <span class="badge badge-dot size-2 bg-warning">
 </span>
 </td>
 <td>
 30 Jul, 2024
 </td>
 <td>
 Legal Dept
 </td>
 <td>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
 <i class="ki-outline ki-notepad-edit">
 </i>
 </a>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
 <i class="ki-filled ki-category">
 </i>
 </a>
 </td>
 </tr>
 <tr>
 <td>
 25
 </td>
 <td>
 <span class="badge badge-dot size-2 bg-warning">
 </span>
 </td>
 <td>
 30 Jul, 2024
 </td>
 <td>
 Legal Dept
 </td>
 <td>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
 <i class="ki-outline ki-notepad-edit">
 </i>
 </a>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
 <i class="ki-filled ki-category">
 </i>
 </a>
 </td>
 </tr>
 <tr>
 <td>
 26
 </td>
 <td>
 <span class="badge badge-dot size-2 bg-warning">
 </span>
 </td>
 <td>
 30 Jul, 2024
 </td>
 <td>
 Legal Dept
 </td>
 <td>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
 <i class="ki-outline ki-notepad-edit">
 </i>
 </a>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
 <i class="ki-filled ki-category">
 </i>
 </a>
 </td>
 </tr>
 <tr>
 <td>
 27
 </td>
 <td>
 <span class="badge badge-dot size-2 bg-warning">
 </span>
 </td>
 <td>
 30 Jul, 2024
 </td>
 <td>
 Legal Dept
 </td>
 <td>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
 <i class="ki-outline ki-notepad-edit">
 </i>
 </a>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
 <i class="ki-filled ki-category">
 </i>
 </a>
 </td>
 </tr>
 <tr>
 <td>
 28
 </td>
 <td>
 <span class="badge badge-dot size-2 bg-warning">
 </span>
 </td>
 <td>
 30 Jul, 2024
 </td>
 <td>
 Legal Dept
 </td>
 <td>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
 <i class="ki-outline ki-notepad-edit">
 </i>
 </a>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
 <i class="ki-filled ki-category">
 </i>
 </a>
 </td>
 </tr>
 <tr>
 <td>
 29
 </td>
 <td>
 <span class="badge badge-dot size-2 bg-warning">
 </span>
 </td>
 <td>
 30 Jul, 2024
 </td>
 <td>
 Legal Dept
 </td>
 <td>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
 <i class="ki-outline ki-notepad-edit">
 </i>
 </a>
 <a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
 <i class="ki-filled ki-category">
 </i>
 </a>
 </td>
 </tr>
 </tbody>
 </table>




const datatableEl = document.querySelector("#test_datatable");
const options = {
pageSize: 5,
stateSave: true
};
const datatable = new KTDataTable(datatableEl, options);

datatable.reload();
datatable.showSpinner();




i wan to show all data in the datatable.

at first i tried to change data-datatable-page-size="5" to data-datatable-page-size="-1", it fail

after that i tried to change pageSize: 5, to pageSize : -1, it also fail.


G
Guest 2 months ago
Tailwind
6 Answers
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (6)

user
Faizal Author2 months ago

Hi,

We couldn't display the image. Could you please check the console log for any errors?

If you're building the table using HTML and including the [data-datatable="true"] attribute, there's no need to manually reinitialize it with a new KTDataTable instance in JavaScript. The [data-datatable="true"] attribute will automatically initialize the DataTable.

Let us know if you need further assistance.

Thanks!


G
Guest 2 months ago

Hi, can u try copy the link to your browser and open it? That image is my console. It show no error at all.

I try with both method, when there is no data in the table, "No record" wont be show automatically. But i try to play around with show how many record per page (on the webpage, not html code), "no record" will be display.


user
Faizal Author2 months ago

Hi

"No record" will be handled automatically. Let us know if you find any issues with it.

Thanks


G
Guest 2 months ago

hi, my datatable if no record, "No record" wont show automatically. I tried to change the data-datatable="false" to data-datatable="true", it still cannot work. Image below is my console. u can have a look on it.

image : https://postimg.cc/K1HQgyPz



<div data-datatable="false" >
 <div class="scrollable-x-auto">
 <table class="table table-auto table-border" data-datatable-table="true">
 <thead>
 <tr>
 <th>ID</th>
 <th>Name</th>
 <th>Created At</th>
 <th>Action</th>
 </tr>
 </thead>
 <tbody>
 {% for eachUser in user %}
 <tr>
 <td>{{loop.index}}</td>
 <td>bla bla bla</td>
 <td>bla bla bla</td>
 <td>bla bla bla</td>
 </td>
 {% endfor %}
 </tbody>
 </table>
 </div>
 <div class="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium">
 <div class="flex items-center gap-2">
 Show
 <select class="select select-sm w-16" data-datatable-size="true" name="perpage">
 </select>
 per page
 </div>
 <div class="flex items-center gap-4">
 <span data-datatable-info="true">
 </span>
 <div class="pagination" data-datatable-pagination="true" 
 </div>
 </div>
 </div>


user
Faizal Author2 months ago

Hi

Could you please try to clear browser cache?

Thanks


G
Guest 2 months ago

Hi, thx for the reply. It works well. Beside that, how to handle no record in datatable?



<script>
 const datatableEl = document.querySelector("#domainDatatable");

 const options = {
 infoEmpty : "<p style="text-align:center;">No records found</p>"
 };

 const datatable = new KTDataTable(datatableEl, options);
</script>




<div data-datatable="false" >
 <div class="scrollable-x-auto">
 <table class="table table-auto table-border" data-datatable-table="true">
 <thead>
 <tr>
 <th>ID</th>
 <th>Name</th>
 <th>Created At</th>
 <th>Action</th>
 </tr>
 </thead>
 <tbody>
 {% for eachUser in user %}
 <tr>
 <td>{{loop.index}}</td>
 <td>bla bla bla</td>
 <td>bla bla bla</td>
 <td>bla bla bla</td>
 </td>
 {% endfor %}
 </tbody>
 </table>
 </div>
 <div class="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium">
 <div class="flex items-center gap-2">
 Show
 <select class="select select-sm w-16" data-datatable-size="true" name="perpage">
 </select>
 per page
 </div>
 <div class="flex items-center gap-4">
 <span data-datatable-info="true">
 </span>
 <div class="pagination" data-datatable-pagination="true" 
 </div>
 </div>
 </div>


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(