The Foldable HOC for


Thanks to Tanner Linsley have developed a great open source data-grid named react-table for ReacJs especially the react-table component. When working on a big project for my company and had been required to add-in a feature react-table that allows folding the columns.

So, I had developed a HOC for react-table for that feature and today, by writing this post I would like to share it with all the ReacJs developers.

FoldableTable HOC

FoldableTable is a HOC that make the columns are foldable. The reason I developed this HOC because when working on the real project related to the financial which display so many columns for validation and comparison.

So foldable columns allow users to temporary hidden the unwanted to columns so that they can focus on the data that they want to see.

How it works

It will scan all the columns which foldable is true and apply the foldable column feature. This feature will work for both normal columns and header columns as samples below.

  • With Header Columns

With Header Columns

  • With Normal Columns

With Normal Columns

  • The FoldableTable is also fully compatible with existing HOCs, below is with selectTableHOC.

With Normal Columns

State management

If you would like to manage the state of FoldableTable, then add the following codes.

Custom Components

There are two components shall be customized.

  • FoldIconComponent: to render the Icon of buttons.
  • FoldButtonComponent: to render the folding buttons for each Column. With default rendering as below.


Source Code

you can download the FoldableTable source code and samples here.

The foldableTable HOC had been merge to Hopefully, it will be available soon.

Hope this library is useful to you.

Working with Service Fabric Reverse Proxy


The Reverse Proxy

Working with Service Fabric, you might hear about the Reverse Proxy, a built-in feature of Azure Service Fabric helps microservices running in a Service Fabric cluster discover and communicate with other services that have HTTP endpoints.

The benefit of Reverse Proxy is providing the standard uniform resource identifier format to identify the services running on Service Fabric Clusters. So you can access your services via Reverse Proxy regardless of the actual port of the services.

Refer here to understand more about the Reverse Proxy.

By default, After installed service fabric the Reverse Proxy will run on port 19081 and access the applications or services by following the format below.

Supported Platforms

Reverse proxy in Service Fabric currently supports the following platforms

  • Windows Cluster: Windows 8 and later or Windows Server 2012 and later.
  • Linux Cluster: Reverse Proxy is not currently available for Linux clusters.

So you should using Window 8 or 10 for develop in order to test the Reverse proxy.

The Service Fabric Application

Create a Service Fabric Application on Visual Studio you will see it allows to host various services inside.

There are 2 kindles of services:

  • The Internal services that are working as backend services and can be access by the other services within an application (using Microsoft.ServiceFabric.Services.Remoting.IService ).
  • The https services that allow users to operate with your data or an API services that exposing your data to other consumers outside of the application.

Check out here for more information about Service Fabric Application

In this demo, I created a Service Fabric application named MvcReservedProxy and added a ReactJs Mvc app. When running the application, I shall have a ReactJs app running on port 8383.

Port 8383 is a random value was assigned by Visual Studio when creating the service.

And here is the endpoint configuration in the service manifest.

The application is working perfectly fine with this port. However, let’s see if you have many apps running on PRD, and each application has some HTTP services inside, resolving the port conflict is a challenge as we need to ensure that the occupation ports are not conflicted with existing one in PRD environment.

Fortunately, Service Fabric doesn’t require the ports to be specified. Instead, it will pick-up the free ports when startup your services. After removed, the port from the endpoint and reran the application. I have a new port http://localhost:30001

Amazing, form now onward I don’t need to care about the ports of the HTTP services anymore.

But, whenever, my application got restarted, re-deployed it will have a new port. So, how can I access my application? Luckily, as mentioned above the Reverse proxy is using a specific uniform resource identifier format to identify the service. So, I can access my application via below URL:

However, the website is not working correctly as some resource files were not able to reach when accessing via Reverse proxy.

To fix this issues, we need to add some additional code to the ReactJs project as below.

I. Update ServiceInstanceListener

Open the ReacJs.cs and changes the ServiceFabricIntegrationOptions from None to UseReverseProxyIntegration

II. Update Mvc Startup configuration

Open Startup.cs and add below code into Configure method.

The ServiceNameUrl format is [YourApplicationName]/[YourServiceName].

III. Update Base Url for Javascript application

After the second step, the MVc application will work fine. However, if you are hosting javascript applications (ex: ReacJs or AngularjS), then you need to update the base tad into your _Layout.cshtml because the routing of ReactJs router will use it.

Use in here

Now, Rerun the application and see the result.

Cheers and the source code here.