DEV Community

Infinite Table
Infinite Table

Posted on

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';
Enter fullscreen mode Exit fullscreen mode

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;
};
Enter fullscreen mode Exit fullscreen mode

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);
};
Enter fullscreen mode Exit fullscreen mode

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}>
/>
Enter fullscreen mode Exit fullscreen mode

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" },
};
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

Top comments (1)

Collapse
 
get_infinite profile image
Infinite Table

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