JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>
<table id="example" class="display tablew-sorted table-stripped table-responsive table-bordered" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Office</th>
                <th>Age</th>
                <th>Time since</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Shou Itou</td>
                <td>Tokyo</td>
                <td>20</td>
                <td>1 decade 1 year 1 month 1 week 1 day 1 hour 1 minute</td>
                <td>$163,000</td>
            </tr>
            <tr>
                <td>Michelle House</td>
                <td>Sidney</td>
                <td>37</td>
                <td>1 decade 3 hours 4 minutes 55 seconds</td>
                <td>$95,400</td>
            </tr>
            <tr>
                <td>Suki Burks</td>
                <td>London</td>
                <td>53</td>
                <td>2 months 1 week</td>
                <td>$114,500</td>
            </tr>
            <tr>
                <td>Prescott Bartlett</td>
                <td>London</td>
                <td>27</td>
                <td>1 decade 2 years 3 months 2 weeks 3 minutes</td>
                <td>$145,000</td>
            </tr>
            <tr>
                <td>Gavin Cortez</td>
                <td>San Francisco</td>
                <td>22</td>
                <td>1 decade</td>
                <td>$235,500</td>
            </tr>
            <tr>
                <td>Martena Mccray</td>
                <td>Edinburgh</td>
                <td>46</td>
                <td>2 hours 3 minutes 1 second</td>
                <td>$324,050</td>
            </tr>
            <tr>
              ...

JavaScript

jQuery.extend(jQuery.fn.dataTableExt.oSort,{
    "natural-time-delta-pre" : function(data){
        var result = 0;
        var pattern = /(\d+\s*decades?\s*)?(\d+\s*years?\s*)?(\d+\s*months?\s*)?(\d+\s*weeks?\s*)?(\d+\s*days?\s*)?(\d+\s*hours?\s*)?(\d+\s*minutes?\s*)?(\d+\s*seconds?\s*)?(\d+\s*milliseconds?\s*)?(\d+\s*microseconds?\s*)?/i
        var format_time_element = function(el, splitter, mul){
            if (el === undefined){
                return 0;
            }
            return parseFloat(el.split(splitter)[0].trim()) * mul;
        };

        var matches = data.match(pattern);
        matches.reverse();

        var time_elements = [
            {"name" : "microsecond",    "mul" : 1 / 1000 / 1000},
            {"name" : "millisecond",    "mul" : 1 / 1000},
            {"name" : "second",         "mul" : 1},
            {"name" : "minute",         "mul" : 1 * 60},
            {"name" : "hour",           "mul" : 1 * 60 * 60},
            {"name" : "day",            "mul" : 1 * 60 * 60 * 24},
            {"name" : "week",           "mul" : 1 * 60 * 60 * 24 * 7},
            {"name" : "month",          "mul" : 1 * 60 * 60 * 24 * 7 * 30},
            {"name" : "year",           "mul" : 1 * 60 * 60 * 24 * 7 * 30 * 12},
            {"name" : "decade",         "mul" : 1 * 60 * 60 * 24 * 7 * 30 * 12 * 10},
        ];

        time_elements.forEach(function(el, i){
            var val = format_time_element(matches[i], el.name, el.mul);
            result += val;
        });

        return result || -1;
    },

    "natural-time-delta-asc" : function (a, b) {
        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    },

    "natural-time-delta-desc" : function (a, b) {
        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
    }
});


$("#example").DataTable({
    columnDefs:[
      {"type" : "natural-time-delta", "targets" : 3}
    ]
  });