Tabular template

 

Table of contents

⭐ Overview

• The challenge
• Instalation
• Links

💡 My process

• Technologies
• Solutions provided in the project
• Useful resources

Screenshot

🙋‍♂️ Author

👏 Special Thanks

 

⭐ Overview

 

The challenge:

It was my first small project using React and React Testing Library. The challenge was to create the own solution of the table in imitation of material-table to be universal and re-used.

Installation 💿

The project uses node, npm, CRA.

Having them installed, type into the terminal:

npm i

Then, you may run webpack typing in the terminal:

npm start

App is available using the following addresses:

http://localhost:3000

 

Links:

• GitHub
• live

 

Technologies:

 

Solutions provided in the project:

• HTML:

  • The project was built using semantic HTML5 markup.

• CSS:

  • The css styles are created using styled-components.

• JS:

  • ES2015+ (arrow functions, destructuring, spread operator) was used.

• React:

  • The following hooks were used: useState, useEffect, useRef, useContext.
  • Components are split and kept in smaller ones.
  • Font Awesome ikons was used in React app thanks to @fortawesome/react-fontawesome.

• Jest:

  • The tests was prepared using Jest and React testing Library.
  • The tests was created also using Mock.

The universal <Table> component was created in imitation of material-table library. The data are displayed in table with pagination. The possibility of data sorting and filtering are provided.

const Pagination = props => {
    const {children} = props;
    const length = children.length;

    const {page, limit, setPages} = useContext(PaginationContext)
    
    const begin = limit * (page -1);
    const end = page * limit;
    
    const pages = Math.ceil(length / limit);

    useEffect(()=>{setPages(pages)}, [children, pages, setPages]);

    return (
        <> 
            {children.slice(begin, end)}
        </>
    );
}

In the <tfoot> the navigation TableNav to appropriate pages was placed:

const TableNav = () => {
    const {page, setPage, pages} = useContext(PaginationContext);
    
    const buttons = (new Array(pages).fill(0)).map((item, index) => 
        <li key={index}>
            <button onClick={()=>setPage(index+1)}>{index +1}</button>
        </li>
    );

    return(
        <StyledTableNav page={page}><ul>{buttons}</ul></StyledTableNav>
    )
} 

I had opted to use styled-components as a solution for managing the CSS.

To make coding with styled-component more comfortable, I used a special Extension in Visual Studio Code vscode-styled-components.

I used the createGlobalStyle function from styled-components and added reset style and some global styles (Reset.js and Global.js)

import {createGlobalStyle} from 'styled-components';
import latoRegularWoff from "./../fonts/lato-regular-webfont.woff";
import latoRegularWoff2 from "./../fonts/lato-regular-webfont.woff2";
 .....
const GlobalStyle = createGlobalStyle
    ...
    @font-face {
        font-family: "Lato";
        font-style: regular;
        font-weight: 400;
        src:
        url(${latoRegularWoff2}) format('woff2'),
        url(${latoRegularWoff}) format('woff');
    }

Useful resources:

• React Testing libary
• Google Font - Lato
• Font Avesome

 

🙋‍♂️ Author

The project was made by Małgorzata Kowacka.

• [email protected]
• GitHub - kowackag
• Linked - Małgorzata Kowacka

If you have any questions do not hesitate to contact me.