title: Sorting multiple rows of data in JavaScript with lodash
body: <p>I have some data that I wish to sort into a table. The data consists of an array of rows, which are in turn arrays of cells, which are objects with the properties <code>column_name</code>, <code>column_value</code>, <code>column_type</code> and <code>column_id</code> (as shown below).</p>
  
  <p>I would like to sort the data by multiple columns, e.g. I would like to sort by <code>city</code> ascending and then by <code>age</code> descending. I believe that <a href="https://lodash.com/docs/4.17.10#orderBy" rel="nofollow noreferrer">lodash's <code>_.orberBy()</code></a> can achieve this, but I can't work out how to implement it on nested data like this.</p>
  
  <p>Although I suspect lodash will get the job done, I suspect there might be another way that is better.</p>
  
  <p><em>How would I go about sorting the following, nested data by different columns?</em></p>
  
  <pre><code>import _ from 'lodash';
  
  const sampleData = [
    [
      {
        column_name: 'id',
        column_value: '12345',
        column_type: 'string',
        column_id: 'item_attributes#id',
      },
      {
        column_name: 'age',
        column_value: '32',
        column_type: 'number',
        column_id: 'item_attributes#age',
      },
      {
        column_name: 'city',
        column_value: 'London',
        column_type: 'string',
        column_id: 'item_attributes#city',
      },
    ],
    [
      {
        column_name: 'id',
        column_value: 'abcde',
        column_type: 'string',
        column_id: 'item_attributes#id',
      },
      {
        column_name: 'age',
        column_value: '52',
        column_type: 'number',
        column_id: 'item_attributes#age',
      },
      {
        column_name: 'city',
        column_value: 'Bristol',
        column_type: 'string',
        column_id: 'item_attributes#city',
      },
    ],
    [
      {
        column_name: 'id',
        column_value: 'a1b2d',
        column_type: 'string',
        column_id: 'item_attributes#id',
      },
      {
        column_name: 'age',
        column_value: '21',
        column_type: 'number',
        column_id: 'item_attributes#age',
      },
      {
        column_name: 'city',
        column_value: 'London',
        column_type: 'string',
        column_id: 'item_attributes#city',
      },
    ],
  ];
  
  const orderedData = _.orderBy(
    sampleData,
    // ?? what goes here?
    // ?? what goes here?
  );
  
  // desired output
  // [
  //   [
  //     {
  //       column_name: 'id',
  //       column_value: 'abcde',
  //       column_type: 'string',
  //       column_id: 'item_attributes#id',
  //     },
  //     {
  //       column_name: 'age',
  //       column_value: '52',
  //       column_type: 'number',
  //       column_id: 'item_attributes#age',
  //     },
  //     {
  //       column_name: 'city',
  //       column_value: 'Bristol',
  //       column_type: 'string',
  //       column_id: 'item_attributes#city',
  //     },
  //   ],
  //   [
  //     {
  //       column_name: 'id',
  //       column_value: '12345',
  //       column_type: 'string',
  //       column_id: 'item_attributes#id',
  //     },
  //     {
  //       column_name: 'age',
  //       column_value: '32',
  //       column_type: 'number',
  //       column_id: 'item_attributes#age',
  //     },
  //     {
  //       column_name: 'city',
  //       column_value: 'London',
  //       column_type: 'string',
  //       column_id: 'item_attributes#city',
  //     },
  //   ],
  //   [
  //     {
  //       column_name: 'id',
  //       column_value: 'a1b2d',
  //       column_type: 'string',
  //       column_id: 'item_attributes#id',
  //     },
  //     {
  //       column_name: 'age',
  //       column_value: '21',
  //       column_type: 'number',
  //       column_id: 'item_attributes#age',
  //     },
  //     {
  //       column_name: 'city',
  //       column_value: 'London',
  //       column_type: 'string',
  //       column_id: 'item_attributes#city',
  //     },
  //   ],
  // ]
  </code></pre>