Boost Your Productivity with 5 Built-in React Grid Features

See five of the features the KendoReact Data Grid offers to help you craft a wonderful experience in no time.

The React Data Grid from the Progress KendoReact UI library is more than what it seems on the surface. Not just a highly performant data grid (including server capabilities), it also comes with tons of built-in features that make it a user experience dream. And, of course, since all these nifty features are included out of the box, it’s super easy and fast for developers to implement. Let’s take a look at five of my favorite built-in features from the KendoReact Data Grid:

1. Column Spanning

To make a data grid look super neat and clean, column spanning is a must-have. When you’re dealing with subcategories or other nested information, column spanning allows us to communicate complex information clearly. For the KendoReact Data Grid, all we need is the colSpan prop to get everything looking just the way we want.

<Column colSpan={2} field="UnitPrice" title="Unit Price" />

2. Row Reordering

For our users, one of the primary purposes of a data grid is comparing and contrasting information. How many sales have we made for this product vs. that one? How is this item ranking vs. another? Sometimes sorting and filtering functions can help with that, but occasionally we just want a specific set of rows all lined up—regardless of their typical organization.

Row reordering is perfect for that because it allows our users to grab a row and drag it wherever they like! By enabling rowReorderable in our parent Grid component, we can easily add this (very handy) feature for our users.

 <Grid
      rowReorderable={{ enabled: true }}
      onRowReorder={handleRowReorder}
      style={{ height: '400px' }}
      data={data}
  >

3. Loading Indicator

As we’ve already mentioned (and, honestly, as you probably knew already): data grids can contain a lot of content. Sometimes, that means there’s a little bit of a delay when all that information is getting fetched or updated.

In that case, a loading indicator is the polite way to let our users know that everything is functioning as intended—they just need to wait a second! It’s one of those little touches that seems unimportant, but can really level up the professionalism and polish of our application. All we need to do is leverage the built-in showLoader property.

const [showLoader, setShowLoader] = React.useState<boolean>(true);

React.useEffect(() => {
    setShowLoader(true);

    setTimeout(() => {
        setShowLoader(false);
        setData(products);
    }, 2000);
}, []);

return (
  <Grid showLoader={showLoader} data={data}>
 )

4. Context Menu

Sometimes, you want to offer users some extra functionality at the tips of their fingers—a context menu is perfect for that. With that, row selection and column sorting is just a right-click away! And for developers, just a prop away with contextMenu.

<Grid
    contextMenu={true}
    sortable={true}
    selectable={{ enabled: true }}
>

5. Clipboard

Let’s be honest: for a lot of folks, common keyboard shortcuts are so deeply ingrained, we don’t always even realize when we’re using them. Ctrl+C and Ctrl+V are basically automatic for me at this point—which makes it super frustrating when I can’t use them! Don’t do that to your users; let them leverage all the habits that make them faster and more efficient by enabling the built-in clipboard functions in the KendoReact Data Grid.

This one involves a little more code than we can fit into a snippet here on the blog—but good news, we’ve built a fully functional demo in our docs with code you can steal reference! ;)

There you go: five great ways to take your KendoReact Data Grid to the next level with built-in features! Which one will you add to your app, next?

Not yet using KendoReact? Get started with KendoReact Free today!