PrimeReact Datable Column sortField Demo

<!DOCTYPE html>
<html>

  <head>
    <title>PrimeReact QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
    
    <!-- PrimeReact style dependencies -->
    <link rel="stylesheet" href="https://unpkg.com/primereact@2.0.0-rc.1/resources/themes/omega/theme.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="https://unpkg.com/primereact@2.0.0-rc.1/resources/primereact.min.css" />
    
    <!-- Configure SystemJS -->
    <script src="https://unpkg.com/systemjs@0.20"></script>
    <script src="systemjs.config.js"></script>
  </head>

  <body>
    <div id="root"></div>
  </body>

</html>

body {
  padding: 2em;
  font-family: Arial, Helvetica, sans-serif;
}

# PrimeReact DataTable sortField
sortField is ignored, rows are always sorted alphabetically by the value of 'field'

/*global System */
'use strict';

System.config({
    transpiler: 'plugin-babel',
    babelOptions: {
        sourceMaps: false,
        stage0: true,
        react: true
    },
    meta: { },
    paths: {
      'npm:': 'https://unpkg.com/'
    },
    map: {
      // our app is within the app folder
      app: 'app/index.jsx', 
      "plugin-babel": 'https://unpkg.com/systemjs-plugin-babel@0.0.25/plugin-babel.js',
      "systemjs-babel-build": 'https://unpkg.com/systemjs-plugin-babel@0/systemjs-babel-browser.js',
      "react": "npm:react@16/umd/react.development.js",
      "react-dom": "npm:react-dom@16/umd/react-dom.development.js",
      "prop-types": "npm:prop-types/prop-types.js",
      "classnames": "npm:classnames@2.2.5",
      "font-awesome": "npm:font-awesome@4.7.0",
      "react-scripts": "npm:react-scripts@1.0.11",
      "react-transition-group": "npm:react-transition-group@2.2.1",
      "primereact": "npm:primereact@2.0.0-rc.1"

    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      'https://unpkg.com/' : { defaultExtension: false },
    }
});
 
System.import('app');

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('root'));

import React from 'react';
import {DataTable} from 'primereact/components/datatable/DataTable';
import {Column} from 'primereact/components/column/Column';

export default class App extends React.Component {
    
    render() {
      const data = [
        {
          name: 'Datum 1',
          readableField: 'Big Value',
          numericValue: 1000
        },
        {
          name: 'Datum 2',
          readableField: 'Little Value',
          numericValue: 1
        },
        {
          name: 'Named Datum',
          readableField: 'Middle Value',
          numericValue: 500
        }
      ];
      
      return (
        <DataTable value={data}>
          <Column field="name" header="Name" />
          <Column field="readableField" sortField="numericValue" header="Sortable Field" sortable={true} />
          <Column field="numericValue" header="sortField Value" />
        </DataTable>
      );
    }
}