Multiple sorting for your React project
Tags: react, typescript, webdev, tutorial
Published: 2022-05-24 20:55:51

https://infinite-table.com/ is a new alternative for React projects that helps you display huge amounts of data, by using full virtualization.

In this demo, I want to show you how easy it is to have your data-source sorted using multiple fields.

We'll use a data-source that lists developers, with their first name, last name, age, country, city, salary and a few other fields

First, you need to import the `InfiniteTable` component and the `DataSource` component

```tsx
import {
  InfiniteTable,
  DataSource,
} from '@infinite-table/infinite-react';
```

Next, since the component is built in `Typescript`, you can define the type of your data-source items, so let's define the TS type for that

```ts
type Developer = {
  id: number;
  firstName: string;
  lastName: string;
  country: string;
  city: string;
  currency: string;
  preferredLanguage: string;
  stack: string;
  canDesign: 'yes' | 'no';
  hobby: string;
  salary: number;
  age: number;
};
```

The next thing we have to do is define a function to load the data from the server, and that's as easy as a fetch request

```ts
const dataSource = () => {
  return fetch('https://infinite-table.com/.netlify/' + 
    'functions/json-server/developers1k'
  )
    .then((r) => r.json())
    .then((data: Developer[]) => data);
};
```

Now we're ready to render the `DataSource` component - please note it accepts a generic type, so it will be rendered as `<DataSource<Developer> .../>`

```tsx
<DataSource<Developer>
  primaryKey="id"
  data={dataSource}>
/>
```

And where's the table component? Well, we'll nest it inside the `DataSource`. But first we need some columns for the table, so let's define a map of columns

```ts
const columns = {
  id:       { field: "id", defaultWidth: 80 },
  name:     { field: "firstName"},
  stack:    { field: "stack" },
  language: { field: "preferredLanguage" },
  country:  { field: "country" },
};
```
You can define any columns you want, and even map more columns to the same field from the `DataSource` - but that's for another article.

Now that we have the columns, we're ready to render the table as well,

```tsx
<DataSource<Developer> primaryKey="id" data={dataSource}>
  <InfiniteTable<Developer> columns={columns} />
</DataSource>
```

Oh, and let's add sorting. Sorting is a concern for the data-source, so that should be a prop of the `DataSource` component.

```tsx
<DataSource<Developer>
  primaryKey="id"
  data={dataSource}
  defaultSortInfo={[
   { field: "stack", dir: 1 },
   { field: "preferredLanguage", dir: 1 },
   { field: "country", dir: 1 }
 ]}
>
  <InfiniteTable<Developer> columns={columns} /> 
</DataSource>
```
The sorting is multiple sorting - so we're using an array - it clearly sends a message that there are multiple sorting properties being applied. For single sorting, use an object. Also, note the prop is called `defaultSortInfo`, as it's uncontrolled.
You could use the controlled `sortInfo`, but that's useful when you want to sort the array yourself, but just communicate to the table the sorting order, in order for it to show the correct UI details for sorting. But that's another story.

See the code in action below, and find out more about it at [infinite-table.com](https://infinite-table.com/docs/latest/learn/working-with-data/sorting)
{% embed https://codesandbox.io/embed/sandpack-project-forked-cm0pmj?fontsize=14&hidenavigation=1&theme=dark&view=preview"
     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
     title="multi-sort-info"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts %}