Close Menu
Soshace Digital Blog

    Subscribe to Updates

    Get The Latest News, Updates, And Amazing Offers

    What's Hot
    Job

    Web Developer Portfolio: The Definitive 2019 Guide with 15 Portfolio Examples

    JavaScript

    Nest.js and AWS Lambda for Serverless Microservices

    LinkedIn

    Transforming LinkedIn Connections into Viable Sales Leads

    Important Pages:
    • Home
    • About
    • Services
    • Contact Us
    • Privacy Policy
    • Terms & Conditions
    Facebook X (Twitter) Instagram LinkedIn YouTube
    Today's Picks:
    • Scaling Success: Monitoring Indexation of Programmatic SEO Content
    • Leveraging Influencers: Key Drivers in New Product Launches
    • How Privacy-First Marketing Will Transform the Industry Landscape
    • The Impact of Social Proof on Thought Leadership Marketing
    • Balancing Value-Driven Content and Promotional Messaging Strategies
    • Top Influencer Marketing Platforms to Explore in 2025
    • Emerging Trends in Marketing Automation and AI Tools for 2023
    • Strategies to Mitigate Duplicate Content in Programmatic SEO
    Friday, October 17
    Facebook X (Twitter) Instagram LinkedIn YouTube
    Soshace Digital Blog
    • Home
    • About
    • Services
    • Contact Us
    • Privacy Policy
    • Terms & Conditions
    Services
    • SaaS & Tech

      Maximizing Efficiency: How SaaS Lowers IT Infrastructure Costs

      August 27, 2025

      Navigating Tomorrow: Innovations Shaping the Future of SaaS

      August 27, 2025

      Maximizing Impact: Strategies for SaaS & Technology Marketing

      August 27, 2025
    • AI & Automation

      Enhancing Customer Feedback Analysis Through AI Innovations

      August 27, 2025

      Navigating the Impact of AI on SEO and Search Rankings

      August 27, 2025

      5 Automation Hacks Every Home Service Business Needs to Know

      May 3, 2025
    • Finance & Fintech

      Critical Missteps in Finance Marketing: What to Avoid

      August 27, 2025

      Analyzing Future Fintech Marketing Trends: Insights Ahead

      August 27, 2025

      Navigating the Complex Landscape of Finance and Fintech Marketing

      August 27, 2025
    • Legal & Compliance

      Exploring Thought Leadership’s Impact on Legal Marketing

      August 27, 2025

      Maximizing LinkedIn: Strategies for Legal and Compliance Marketing

      August 27, 2025

      Why Transparency Matters in Legal Advertising Practices

      August 27, 2025
    • Medical Marketing

      Enhancing Online Reputation Management in Hospitals: A Guide

      August 27, 2025

      Analyzing Emerging Trends in Health and Medical Marketing

      August 27, 2025

      Exploring Innovative Content Ideas for Wellness Blogs and Clinics

      August 27, 2025
    • E-commerce & Retail

      Strategic Seasonal Campaign Concepts for Online and Retail Markets

      August 27, 2025

      Emerging Trends in E-commerce and Retail Marketing Strategies

      August 27, 2025

      Maximizing Revenue: The Advantages of Affiliate Marketing for E-Commerce

      August 27, 2025
    • Influencer & Community

      Leveraging Influencers: Key Drivers in New Product Launches

      August 27, 2025

      Top Influencer Marketing Platforms to Explore in 2025

      August 27, 2025

      Key Strategies for Successful Influencer Partnership Negotiations

      August 27, 2025
    • Content & Leadership

      The Impact of Social Proof on Thought Leadership Marketing

      August 27, 2025

      Balancing Value-Driven Content and Promotional Messaging Strategies

      August 27, 2025

      Analyzing Storytelling’s Impact on Content Marketing Effectiveness

      August 27, 2025
    • SEO & Analytics

      Scaling Success: Monitoring Indexation of Programmatic SEO Content

      August 27, 2025

      Strategies to Mitigate Duplicate Content in Programmatic SEO

      August 27, 2025

      Effective Data Visualization Techniques for SEO Reporting

      August 27, 2025
    • Marketing Trends

      How Privacy-First Marketing Will Transform the Industry Landscape

      August 27, 2025

      Emerging Trends in Marketing Automation and AI Tools for 2023

      August 27, 2025

      Maximizing ROI: Key Trends in Paid Social Advertising

      August 27, 2025
    Soshace Digital Blog
    Blog / JavaScript / POS Tutorial / Create simple POS with React.js, Node.js, and MongoDB #12 : Getting started with React Table
    Node.js

    Create simple POS with React.js, Node.js, and MongoDB #12 : Getting started with React Table

    Krissanawat KaewsanmuangBy Krissanawat KaewsanmuangAugust 14, 2020Updated:March 9, 2021No Comments7 Mins Read
    Facebook Twitter Pinterest Telegram LinkedIn Tumblr Email Reddit
    Create simple POS with React.js, Node.js, and MongoDB #12 : Getting started with React Table
    Create simple POS with React.js, Node.js, and MongoDB #12 : Getting started with React Table
    Share
    Facebook Twitter LinkedIn Pinterest Email Copy Link
    Create simple POS with React.js, Node.js, and MongoDB #12 : Getting started with React Table
    Create simple POS with React.js, Node.js, and MongoDB #12 : Getting started with React Table

    Defenition: POS – “Point of Sale”. At the point of sale, the merchant calculates the amount owed by the customer, indicates that amount, may prepare an invoice for the customer (which may be a cash register printout), and indicates the options for the customer to make payment.

    In the previous chapter, we discovered how to make relations on the database and deal with new UI change by adding multiple dropdowns. We upgraded the CRUD operations to the next level with the addition of Relationships in backend API configurations. 

    In this chapter, we are going to learn something new and tackle another challenge. We are going to upgrade the boring old general table feature to a rich full-fledged table with features like filtering, sorting, pagination, grouping, etc. Meanwhile, in this chapter, we are going to deal with integrating react-table to the old table first.

    react-table is one of the popular and dynamic table components for React. In the latest version, we are going to discard the old codebase and transform it into the headless component.

    Here, we are going to create a new branch component in order to try and experiment before applying to another component.

    let’s get started!

    Setting up react-table package

    First, we need to install the react-table package into our project. For this, we need to run the following command in our project terminal:

    yarn add react-table

    Then, we need to create a separate component called Table.js in our ./components directory using the following command in the terminal:

    mkdir components/Table.js

    Next, we need to import the necessary components as shown in the code snippet below:

    import React from "react";
    import { useTable } from "react-table";

    Create a new React Table Component

    Here, we are going to create a functional component named Table in order to handle the new React Table instance taking columns and data as props. The code to implement it is provided in the code snippet below:

    export default function Table({ columns, data }) {
        const {
            getTableProps,
            getTableBodyProps,
            headerGroups,
            rows,
            prepareRow,
        } = useTable(
            {
                columns,
                data
            }
        );

    Next, we need to create a table markup and attach the react-table method to the control table code below. This will help us understand the concept of the headless components. Instead, we generate all HTML from <Table …otherProp />. Then, we attach the component method as inline properties as directed in the code snippet below:

    return (
            <table {...getTableProps()} className="table table-bordered table-condensed table-responsive" style={{ 'display': 'table' }} >
                <thead>
                    {headerGroups.map(headerGroup => (
                        <tr {...headerGroup.getHeaderGroupProps()}>
                            {headerGroup.headers.map(column => (
                                <th >
                                    {column.render("Header")}
                                </th>
                            ))}
                        </tr>
                    ))}
                </thead>
                <tbody {...getTableBodyProps()}>
                    {rows.map((row, i) => {
                        prepareRow(row);
                        return (
                            <tr {...row.getRowProps()}>
                                {row.cells.map(cell => {
                                    return (
                                        <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
                                    );
                                })}
                            </tr>
                        );
                    })}
                </tbody>
            </table>
        );

    Now, we have successfully implemented our Table component.

    Read More:  React Lesson 11. Pt.2: Redux Middlewares

    Using Table component

    Here, we need to import the Table component and its CSS for adjusting table along with loading image to ../branch/index.js file as directed in the code snippet below:

    import Table from '../Table';
    import './branch.css'
    import loading from '../../assets/image/loading.gif'

    Next, we are going to create a React memo constant called columns using useMemo hook to handle column structure. The table layout structure in the code below shows our migration from the old table. It is nothing new.

    We can replicate this step on another component as well.

    const columns = React.useMemo(
            () => [
                {
                    Header: "Front Image",
                    accessor: "frontimage",
                    Cell: ({ cell: { value } }) => <img class="img-fluid img-rounded"
                        width={200} src={process.env.REACT_APP_BRANCH_FRONT_IMAGE_PATH + '/' + value} />
                },
                {
                    Header: 'Name',
                    accessor: 'name', // accessor is the "key" in the data
                },
                {
                    Header: 'Address',
                    accessor: 'address',
                },
                {
                    Header: 'Pos Machine',
                    accessor: 'pos_machines',
                    Cell: ({ cell: { value } }) => {
                        return value.map(data => {
                            return <span key={data} className="badge">{data.alias}</span>
                        })
                    }
                },
                {
                    Header: 'Action',
                    accessor: '_id',
                    Cell: ({ cell: { value } }) => {
                        // alert(id)
                        return <><Link to={"/branch/update/" + value} type="button"
                            class="btn btn-primary" style={{ 'margin-right': '5px' }}
                            onClick={() => dispatch(branchActions.clearState())}
                        >
                            Edit
                            </Link>
                            <Link type="button" class="btn btn-danger" onClick={() => confirmDelete(value)}>
                                Delete
                        </Link></>
                    }
                },
            ],
            []
        )

    Here, we need to wait for data from the server once again to be available on reducer before we render the table.

    Next, we need to create a function to handle conditional rendering while we display loading image until waiting for the data to load. The code for the function is provided in the code snippet below:

    const Holdon = (columns) => {
            if (branchReducer.result) {
                return <Table columns={columns} data={branchReducer.result} />
            } else {
                return <img class="img-fluid img-rounded"
                    src={loading} />
            }
        }

    Lastly, we need to call the Holdon function to the render function in order to display it to the interface as shown in the code snippet below:

    <div className="card card-body">
              {Holdon(columns, data)}
    </div>

    Hence, we will get the result as displayed in the simulation below:

    Update normal table to react table
    Update normal table to react table

    Finally, we have successfully created and integrated the Table component using the react-table component.

    Filtering

    Here, we are going to work on Table.js file only. The idea of filtering is filtering through the database based on the input data that we add to the input field in the table header. Thus, the table will only show the filtered data at the end.

    Read More:  TOP 11 JavaScript Machine Learning & Data Science Libraries

    First, we need to import useFilters hook from react-table as shown in the code snippet below:

    import { useTable, useFilters } from "react-table";

    Then, we need to create a new state called filterInput to hold the filter input data as directed in the code snippet below:

    const [filterInput, setFilterInput] = useState("");

    Next, we need to attach useFiltershook and setFilterInput state function to react-table object as shown in the code snippet below:

    const {
            getTableProps,
            getTableBodyProps,
            headerGroups,
            rows,
            prepareRow,
            setFilter
        } = useTable(
    
            {
                columns,
                data
            }, useFilters,
        );

    Now, we need to create a function to handle the filtering tasks. For initial setup, we are going to use the name column in order to filter through the data as shown in the code snippet below:

    const handleFilterChange = e => {
            const value = e.target.value || undefined;
            setFilter("name", value);
            setFilterInput(value);
        };

    Lastly, we need to add a new input field at the top of the table using the input element with required props and functions as highlighted in the code snippet below:

    <>
                <input
                    value={filterInput}
                    onChange={handleFilterChange}
                    placeholder={"Search name"}
                />
                <table {...getTableProps()} className="table table-bordered table-condensed table-responsive" style={{ 'display': 'table' }} >
                    <thead>
                        {headerGroups.map(headerGroup => (
                            <tr {...headerGroup.getHeaderGroupProps()}>
                                {headerGroup.headers.map(column => (
                                    <th >
                                        {column.render("Header")}
                                    </th>
                                ))}
                            </tr>
                        ))}
                    </thead>

    Hence, we will get the result as displayed in the following demo.

    React table filtering result
    React table filtering result

    Challenge…

    Now, the challenge is to implement it to our other components.

    Conclusion

    In this chapter, we learned how to integrate react-table to our codebase and replace the old table. We created a headless Table component so that we can import it to other components and use it easily. The difficult part was to handle the data from the server in order to display it in the table view. Here, we have to wait for data to load completely from the server otherwise an error may occur. For this, we implemented the hold-on function which dealt with it easily.

    In the next chapter, we will learn how to add sorting and grouping features to our Table component.

    The code for this chapter is available on Github.

    See you at the next one! Adios!

     
    Share. Facebook Twitter Pinterest LinkedIn Tumblr Email
    Krissanawat Kaewsanmuang
    • Website
    • X (Twitter)

    Developer Relation @instamobile.io

    Related Posts

    An Introduction to Clustering in Node.js

    March 26, 2024

    JAMstack Architecture with Next.js

    March 15, 2024

    Rendering Patterns: Static and Dynamic Rendering in Nextjs

    March 7, 2024
    Leave A Reply Cancel Reply

    You must be logged in to post a comment.

    Stay In Touch
    • Facebook
    • Twitter
    • Pinterest
    • Instagram
    • YouTube
    • Vimeo
    Don't Miss
    B2B Leads December 5, 2024

    Top Strategies for Effective B2B Lead Generation with Content

    In the competitive world of B2B marketing, effective lead generation hinges on quality content. Strategies like targeted blog posts, informative webinars, and insightful eBooks not only attract potential clients but also establish credibility and thought leadership in your industry.

    Web & Software Development Fundamentals for Non-Programmers

    March 4, 2019

    Mastering Project Timelines: A Step-by-Step Guide

    November 27, 2024

    Best Service provides for Small Businesses

    July 4, 2020

    Categories

    • AI & Automation
    • Angular
    • ASP.NET
    • AWS
    • B2B Leads
    • Beginners
    • Blogs
    • Business Growth
    • Case Studies
    • Comics
    • Consultation
    • Content & Leadership
    • CSS
    • Development
    • Django
    • E-commerce & Retail
    • Entrepreneurs
    • Entrepreneurship
    • Events
    • Express.js
    • Facebook Ads
    • Finance & Fintech
    • Flask
    • Flutter
    • Franchising
    • Funnel Strategy
    • Git
    • GraphQL
    • Home Services Marketing
    • Influencer & Community
    • Interview
    • Java
    • Java Spring
    • JavaScript
    • Job
    • Laravel
    • Lead Generation
    • Legal & Compliance
    • LinkedIn
    • Machine Learning
    • Marketing Trends
    • Medical Marketing
    • MSP Lead Generation
    • MSP Marketing
    • NestJS
    • Next.js
    • Node.js
    • Node.js Lessons
    • Paid Advertising
    • PHP
    • Podcasts
    • POS Tutorial
    • Programming
    • Programming
    • Python
    • React
    • React Lessons
    • React Native
    • React Native Lessons
    • Recruitment
    • Remote Job
    • SaaS & Tech
    • SEO & Analytics
    • Soshace
    • Startups
    • Swarm Intelligence
    • Tips
    • Trends
    • Vue
    • Wiki
    • WordPress
    Top Posts

    Exploring the Power of JavaScript Proxies and Reflect API

    JavaScript April 22, 2023

    Effective Strategies for Managing Project Risks Successfully

    JavaScript December 1, 2024

    14. Node.js Lessons. Script Debugging pt 1.

    Programming September 30, 2016

    Best Background Check Services Assessments

    Consultation April 12, 2019

    Subscribe to Updates

    Get The Latest News, Updates, And Amazing Offers

    About Us
    About Us

    Soshace Digital delivers comprehensive web design and development solutions tailored to your business objectives. Your website will be meticulously designed and developed by our team of seasoned professionals, who combine creative expertise with technical excellence to transform your vision into a high-impact, user-centric digital experience that elevates your brand and drives measurable results.

    7901 4th St N, Suite 28690
    Saint Petersburg, FL 33702-4305
    Phone: 1(877)SOSHACE

    Facebook X (Twitter) Instagram Pinterest YouTube LinkedIn
    Our Picks
    JavaScript

    Node.js Lesson 13: Debugging in Node.js

    B2B Leads

    Unlock B2B Leads: Harnessing Strategic Partnerships Effectively

    B2B Leads

    Effective Networking Strategies to Boost B2B Lead Generation

    Most Popular

    Mastering JavaScript Proxies: Practical Use Cases and Real-World Applications

    Express.js

    Front-End Developer Job Description | Write a Good Job Post That Will Actually Attract Candidates

    Job

    React Lesson 5: React Devtools and Reusable Open-Source Components

    JavaScript
    © 2025 Soshace Digital.
    • Home
    • About
    • Services
    • Contact Us
    • Privacy Policy
    • Terms & Conditions

    Type above and press Enter to search. Press Esc to cancel.