SUI Docs

# Sorting

Enable sorting for columns by setting the sort attribute.

<su-table :headers="dataHoldingsHeader" :data="dataHoldings" sort>
...
</su-table>

We can add below props to enable sorting on any column.

Property Description Type Default
sort To enable sorting on any column Boolean false
sortArrow Use up or down arrow to represent "sort ascending or descending" at table header Boolean false
arrowShowDefault Arrow to show default or else it shows on mouseover Boolean false
let dataHoldingsHeader = [{
  // Here enabled sorting on tradingsymbol column only
  class: [],
  label: "Symbol",
  field: "tradingsymbol",
  sort: true,
  sortArrow: true,
  arrowShowDefault: true
}, {
  class: [],
  label: "Max available (₹)",
  field: "collateral_value"
}, {
  class: [],
  label: "Pledge Qty",
  field: "pledge_qty"
}, {
  class: [],
  label: "Amount required (₹)",
  field: "loan_value"
}]

<div>
  <su-table :headers="dataHoldingsHeader" :data="dataHoldings" sort>
    <template slot-scope="props">
      <td>
        {{ props.row.tradingsymbol }}
      </td>
      <td>
        {{ props.row.collateral_value }}
      </td>
      <td>
        {{ props.row.pledge_qty }}
      </td>
      <td>
        {{ props.row.loan_value }}
      </td>
    </template>
  </su-table>
</div>

<script>
export default {
  components: {
    "su-table": DataTable
  },
  data () {
    return {
      // headers and data arrays are available in the table introduction section
      dataHoldingsHeader: headers,
      dataHoldings: data
    }
  },

}
</script>
Symbol Max available (₹) Pledge Qty Amount required (₹)
QUICKHEAL 127 1 253.25
UPL 367 1 734.85
L&TFH 165 2 330.9
AXISBANK 3506 11 7011.4
WONDERLA 155 1 309.15
IDFCBANK 22 1 44.9

← Table select →