How to Build a React Table Component

Published in

Bits and Pieces

16 min readSep 26, 2022

In this tutorial, I will be walking you through the various steps involved in building a React table component with Bit and you will later use that table component in a React application. This tutorial assumes NOTHING regarding your knowledge of Bit and how it works, so if this is your first time hearing about Bit you can comfortably follow along. However, you should be familiar with TypeScript and React.

Links to scope and components used in this article

React-table scope
React-App scope
table component
table elements components (tbody, thead, tfoot, tr, td, th)
Chart-data component
types component
sort-array component

What will you be learning in this tutorial?

How to Create, Export, Install, and Version components
Compose components
You will also be learning how to collaborate on components with Bit snap and lane.
How to use components inside an application and a lot more…

We have a lot to learn from this article, and I will be covering every step so there will be no skips (pun intended). The essence is so that you can follow along on your local machine.

If this is your first contact with Bit binary, before creating your workspace, you first need to install Bit on your local machine.

npx @teambit/bvm install

Personally, I first like to create my remote scope before proceeding further. It’s not compulsory that you do this first, but I just like to get it out of the way. And to do that, you will need to create an account on Bit.cloud. Go there and do it now, and while at it, create your Bit scope. Fortunately, Bit Docs has a guide on how to do that here.

After creating your remote scope, you should also see a page like the one above. aviatorscode2.react-table is my [bit cloud username.[scope_name]. The workspace can be started with the default scope, which we will do later.

I am running through these preliminary steps for those who are new to Bit, if you already know how to do all of these, you can skip these steps.

So, the next thing you will need to do is to create a workspace on your local machine. The workspace serves as a staging area for your components.

Chapter 1: Creating the React Table Component

In this chapter, you will also learn about bit components, how to compose components, and how to tag and export components, so seat tightly as we go on this journey together. hope you are excited.

Create a Bit workspace

These are the steps to follow; please keep in mind that this is not the only way to create Bit workspace as I started earlier.

Create a new folder with any name of choice, I used react-table for mine
Open that folder in your command line or using a code editor and run this code to initialize a Bit workspace

bit new react my-react-table --empty --skip-git --default-scope [your-cloud-user-name].react-table

Once the above code is successful, it means Bit has generated a workspace with the necessary files. One of those files will include workspace.jsonc.
Inside the workspace.jsonc file, you will notice that the “defaultScope” is now your [bit.cloud user-name].react-table. Mine will be

Creating Bit Components

In this part, you will be creating new components, the main table component, table elements components, and some function components we will be using for the React table. All of which will be in the same scope.

Creating the util-function component

The table elements component and the main table components will require the function component to work properly, so in that case, you will be creating the function components first. You will be creating two components, one for sort-array and the other for types.

Since the tutorial will cover a number of things, I will go over the process of creating the sort-array function component, and you will have to follow the same process to create the types component, however, the code will be available to you. cool right? we can now proceed.

creating the sort array function component

To create a function component, you will be using the node template, you can also create component scaffolders see the documentation below

Create a component scaffolder | Bit

Bit gives you some basic templates that you can use without having to create your own components. However, you may want…

bit.dev

Inside the workspace, you initially created, run this command

bit create node charts/sort-array

If the command runs successfully, you will notice a new folder called sort-array.

Inside sort-array.ts, you will write the function that will sort the table content, you can either sort it by number, by date or by string. Below is the implementation of the function

the next thing is to export the sort-array component to bit.cloud. But before you do that, you can view the component on your browser, this also helps you to know if there is any error in your component before your export it.

bit start

before exporting a component, you will have to run the following command

bit status

bit status checks to see if there is any issue with your component.

When bit status runs successfully, your component is now ready to be tagged and exported. When you tag a component, Bit compiles, build test and versions that component.

bit tag charts/sort-array

Here is the expected output

new components
(first version for components)
     > aviatorscode2.charts/sort-array@0.0.1

After Bit successfully tags your component, it is then ready to be exported. To export, run

bit export

That component is now available on your remote scope and it can be used by anybody.

Creating the types function component

You will also be needing a types component, you can learn more about the types component here, this component will contain the table-data.ts, link.ts and cell-data.ts. follow the same procedure outlined when creating the sort-array function component to create the types function component.

bit create node charts/types

Just like in the previous function, a types folder will be created, inside the types folder, create a file for table-data.ts, link.ts, and cell-data.ts. You can delete the other files leaving only the files you just create and the index.ts.

Now your types folder should look like this.

Use the bit commands highlighted in the previous function to check the status, compile, tag, and export the types component.

Creating the chart-data React component

The chart-data function component is responsible for converting data in CSV and Matrix format into chart data that can be represented on the React table.

You will be placing the chart-data component inside a different folder, if you notice from your file structure, both sort-array and types components are inside the charts folder. But for chart-data, it will be in a different folder. To create the chart data function component in a new folder, run this command.

bit create react entity/chart-data

this command will create an entity folder and place the chart data component folder inside it. You will also need to create a parse-csv.ts file inside the chart-data folder.

The code to the entire components you will be creating in this tutorial is on my bit.cloud here. you can checkout the code and how the files are structired there.

https://bit.cloud/aviatorscode2/react-table/entity/chart-data/~code

Here are the implementation of the chart-data component: index.ts

chart-data.tsx

chart-data.spec.tsx to write your test

In addition to the files inside the chart-data folder, create a new file called parse-csv.ts.

Now, follow the processes outlined in the previous component to export the chart-data component to your remote scope.

Creating the table element components

For the table elements components, you will create six table elements components one after the other. These components will later be composed to form the actual table component, they include the th, td, tr, thead, tbody, and tfoot.

Creating the th React component

I will work you through the process of creating and exporting this component, with the hope that you will be able to follow the same process to create the other table element components. Remember that all source codes are made available to you on my bit.cloud. You can always go there to check out the code and confirm if you’re on the right track.

Okay, let’s begin, in the same scope as the previous components, create a new component using this command

bit create react charts/elements/th

Inside the th folder, create a new file for the styling, name it th.module.scss. In the th.tsx file, Implement the code for the th.tsx component. Instead of typing out the code, you can either copy and paste the code into your file or fork this component using the command below.

If you are forking the component, you don't need to run the previous command to create the th component, as forking a component creates a copy of that component into your default scope.

bit fork aviatorscode2.react-table/charts/elements/th

In line 3 of the above code, you will notice that I imported { CellData } from a node package module which is carrying my bit.cloud ID “aviatorscode2/react-table.charts.types”. This is because every component in Bit is independent of another, which is why that component can be isolated from your local workspace and exported to your remote. So every component you create or import in Bit has its own node package module.

So how do you locate each component's package name? you can do that by following the convention.

Go to your node_modules folder
Inside the folder, you will see another folder carrying your bit.cloud ID
Open that folder, you will also see others folders, each carrying the name of every component present in your workspace.
Open the folder of the component you want to import into another component
Click on the package.son file of that component folder

Inside the th.module.scss, write the styling for the component.

If after writing your scss code, you see this error in th.tsx.

what you need to do is create a declaration.d.ts file in your root directory and write this code.

Also if you notice an error where classNames is imported, it means you have to install the classNames package as a dependency. To that, run this command

bit install classnames

After this, save your changes and export the component to the remote scope. You can do that by running these commands in the order listed below.

bit compilebit status // run this command first to check the status of the componentbit tag charts/elements/th // this is the component ID
bit export // to export the component to your remote scope

Creating the td React component

You can fork this component into your workspace using the command below.

bit fork aviatorscode2.react-table/charts/elements/td

But if you want to go through the process of creating the component, use the command below

bit create react charts/elements/td

After creating the component, you can copy and paste to code into td.tsx.

And in the td.module.scss

You can also get the source code of this component on Bit cloud here

https://bit.cloud/aviatorscode2/react-table/charts/elements/td/~code

Creating the tr React component

To fork the tr component, use the command below.

bit fork aviatorscode2.react-table/charts/elements/tr

If you also prefer to create the component yourself, use bit create

bit create react charts/elements/tr

After your component has been created, implement the code for the component in tr.tsx.

In line 3 and 4, you will have to import td, th component as a dependency, just as I explained intilally under creating the th component. So replace the dependency address with the one carrying your bit cloud user name.

Also create a tr.module.scss file for the styling

Finally, tag and export the tr component to your remote scope

Creating the thead React component

Fork the thead component using the command below

bit fork aviatorscode2.react-table/charts/elements/thead

To create the component yourself, run the command below

bit create react charts/elements/thead

In the thead.tsx implement the following code

This component doesn’t have styling, but you can always add one yourself. After that, export the component to bit.cloud.

Creating the tbody React component

bit fork aviatorscode2.react-table/charts/elements/tbody

To create the component yourself, use the command below

bit create react charts/elements/tbody

Inside the tbody.tsx, implement the code below

Create a tbody.module.scss to handle the styling

As always, save and export your tbody component to your remote scope on bit.cloud

Creating the tfoot React component

This is the final component you will be creating for the table element. you can fork the component using this command

bit fork aviatorscode2.react-table/charts/elements/tfoot

OR create the command using the command below

bit create react charts/elements/tfoot

The source code for this component is available here if you want to check it out.

https://bit.cloud/aviatorscode2/react-table/charts/elements/tfoot/~code

But if not, here is the implementation of the tfoot in the tfoot.tsx

In the tfoot folder, create a new file called tfoot.module.scss to handle styling

Once you’re done, you can now proceed to creating the main table component.

Composing the table elements into the Table component

Now that you have successfully created the various components that are needed to create the main table components, it’s time to compose those components into the table component. After doing that, you will pass data into the table component to see if it will render its user interface correctly.

But what does compose mean? In simple terms it means to install a component as a dependency in another component, it’s that simple. And you have done that already, remember when you had to go to the node_modules and inside the package.json of a particular component, you got the name of that package and included it in the component that wants to make use of it.

So instead of importing a component like this

import {tbody} from "../elements/tbody"

It will be like this

import {tbody} from "@aviatorscode2/react-table.charts.elements.tbody"

If the component you want to compose is not in your workspace, you first need to install that component, when you install it, it will then be found in your node modules and from there you can import it into any component within your workspace.

In order to create the React table component, you will need to bring in other components that you created earlier into the table component, here is how the dependency graph will look afterwards, showing all the dependency components.

You can view it here. You can also fork this table component using this command below

bit fork aviatorscode2.react-table/charts/table

Let's dive right in, before you proceed to write codes and composing the various components, what is the first thing you need to do? you guessed right, create a table component. by now you should know how to do that already.

bit create react charts/table

In your table component, in the index.ts file. implement the following code, you will have to compose the types component into this file.

For the table.tsx implement the code below

You will need to write some styling for the component, so create a table.module.scss file.

You will need to write a composition for this file, the composition file gives other users an idea of how the table component will render when CSV or matrix data is passed to it. You will write the composition in the table.composition.tsx file

Finally, you will need to write a simple test for your component in the table.spec.ts file.

Chapter 2: Rendering the table component in a React App

If you have gotten to this part of the tutorial, well done. I want you to spice things up a Bit (pun intended). Instead of just creating the React table component and stopping there, I want you to also render the table component in a React app we will be building together so as to see how the table component will be displayed in a typical use case.

So let’s say you are creating a dashboard that requires you to display user data using a table, and then you saw a table component that suits your need. How do you use it in your application? that is what we will be covering in this chapter and a lot more.

Setting up your Bit workspace

The first thing as usual is setting up a Bit workspace, Bit provides you with a React-App workplace template, that you will be using you demonstrate this. so the React-App template will serve as the application you will use to render the table component. Here are the steps to achieve this:

Create a folder in any directory of your choice
Open that folder in your code editor
Run this command

bit new react-app my-react-app --default-scope [bit.cloud-user-name].[scope-name]

Replace [bit.cloud-user-name].[scope-name] with your bit cloud user and remote scope. You will have to create a new scope different from the one you used in the first chapter of this tutorial.

cd into the React-App folder cd my-react-app
run this command to spin up the react-app on your browser bit run my-app

Import the table component

After setting up your workspace and having bit running on your browser, the next step is to import the table component into your workspace so that you can use it.

So your task here is to import the table component, pass data into it, and have that component render somewhere in your React-App currently running on your browser. So how do you achieve this?

Go to the table component you created in the first chapter of this tutorial, and copy the installed command. ( when you want to modify a component and suggest changes on a lane, you import it, but in this case, you are not modifying the table component so you install) .

paste and run that import command on your workspace terminal
If it runs successfully you will notice that the table component is now present in your workspace.
Import the table component into the app.tsx file.
After doing that, created a matrix data, or alternatively a csv file and pass it into the table component, here is the code for my implementation below.

Save, and go back to the tab where you are running Bit to see how it renders

Let’s move to the next section

Import one of the composing table elements

Let’s add some flavour to this, in this section, you will also import one of the components used in composing the table component. The essence is so that you can see how changing or adding some line of code will affect the table that is currently rendered on the browser.

Go to your remote scope and locate the tbody component.
Copy the import command for the tbody component.
Paste and run the command on your React-App workspace
You now have the tbody component on your workspace, inside the tbody.tsx, make some changes to it and see how it changes reflects on the browser.

In this case, I only added a background color to the tbody container.

Lane and Snap

Remember you are assuming that, it was someone else that created the table component and created the tbody. So it means that you can’t update that component since it’s not yours. But what if you make a valuable update to that component and you want the owner of that component to be able to see it and decide if they want to merge it with the original component or not?

All that was described above can be achieved with Bit, after making your changes, all you have to do is create a lane and snap it. you can read more about this feature on Bit Docs.

So to do that, first create a lane. you can create and automatically checkout to that lane using this command

bit lane create tbody

After that runs successfully, you can now snap it

bit snap --message "Added a background color"

The snap command will create a hashed version of the tbody component.

This hashed version of the component cannot be consumed by other developers when they try to import it into their workspace. If they try to, they will get an error similar to this.

You can now export the lane to your remote scope after snapping

bit export

After exporting, you can now review the lane with the component compare feature to see the changes that were made to the original component.

Conclusion

Wow, you have finally come to the end of this tutorial, where you have created a React table component and also rendered that component in a React-App.

You have also been able to cover setting up a bit workspace, creating components, composing components, bit snap and lane, and using components within an application.

This tutorial was mainly to give you a glimpse of what is possible with Bit, and how these processes will be relevant to you when building a personal project and also to your team also.

Try it out and share your experience or any question you might have as you use Bit. Join the Bit community Slack channel and also head to the Documentation to learn