Multiple sorting for your React project

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

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

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

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> .../>

<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

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,

<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.

<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

Comments

[Infinite Table]

You can read more about how to use sorting in our documentation page infinite-table.com/docs/latest/lea...