JSFiddle - React, Tailwind, and code Playground

by wenyi

HTML

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.1/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<script src="https://rawgit.com/Falseee/bootstrap-table/a810d50e864f0b898b2b6316706d5ca3c7bebd1f/src/extensions/editable/bootstrap-table-editable.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.1/bootstrap3-editable/css/bootstrap-editable.css">
<table id="table" data-classes="table table-bordered table-hover table-striped table-dark"></table>

CSS

.glyphicon-ok:before {
     content: "\f00c";
 }
 .glyphicon-remove:before {
     content: "\f00d";
 }
 .glyphicon {
     display: inline-block;
     font: normal normal normal 14px/1 FontAwesome;
     font-size: inherit;
     text-rendering: auto;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }

JavaScript

/**
 * @author zhixin wen <[email protected]>
 * extensions: https://github.com/vitalets/x-editable
 */

($ => {
  const Utils = $.fn.bootstrapTable.utils

  $.extend($.fn.bootstrapTable.defaults, {
    editable: true,
    onEditableInit () {
      return false
    },
    onEditableSave (field, row, oldValue, $el) {
      return false
    },
    onEditableShown (field, row, $el, editable) {
      return false
    },
    onEditableHidden (field, row, $el, reason) {
      return false
    }
  })

  $.extend($.fn.bootstrapTable.Constructor.EVENTS, {
    'editable-init.bs.table': 'onEditableInit',
    'editable-save.bs.table': 'onEditableSave',
    'editable-shown.bs.table': 'onEditableShown',
    'editable-hidden.bs.table': 'onEditableHidden'
  })

  $.BootstrapTable = class extends $.BootstrapTable {
    initTable () {
      super.initTable()

      if (!this.options.editable) {
        return
      }

      $.each(this.columns, (i, column) => {
        if (!column.editable) {
          return
        }

        const editableOptions = {}
        const editableDataMarkup = []
        const editableDataPrefix = 'editable-'
        const processDataOptions = (key, value) => {
          // Replace camel case with dashes.
          const dashKey = key.replace(/([A-Z])/g, $1 => `-${$1.toLowerCase()}`)
          if (dashKey.indexOf(editableDataPrefix) === 0) {
            editableOptions[dashKey.replace(editableDataPrefix, 'data-')] = value
          }
        }

        $.each(this.options, processDataOptions)

        column.formatter = column.formatter || (value => value)
        column._formatter = column._formatter ? column._formatter : column.formatter
        column.formatter = (value, row, index) => {
          const result = Utils.calculateObjectValue(column,
            column._formatter, [value, row, index], value)

          $.each(column, processDataOptions)

          $.each(editableOptions, (key, value) => {
            editableDataMarkup.push(`...