Fixed bug in TheContent and added Panel

src/containers/TheContent.js

 
 // routes config
 import routes from '../routes'
-  
+import { useLocation } from 'react-router-dom'
+
+
 const loading = (
   <div className="pt-3 text-center">
     <div className="sk-spinner sk-spinner-pulse"></div>
 )
 
 const TheContent = () => {
+  const location = useLocation();
   return (
     <main className="c-main">
       <CContainer fluid>
                   exact={route.exact}
                   name={route.name}
                   render={props => (
-                    <CFade>
-                    {/* <CFade code="br-root"> */}
+                    <CFade code={(location.pathname === '/DemoComponent8') ? "br-root" : null}>
                       <route.component {...props} />
                     </CFade>
                   )} />

src/views/demoComponent/DemoComponent5.js

-import React, { lazy } from 'react';
+import React, { lazy, useState } from 'react';
 import {
     CBadge,
     CButton,
 
 
 const DemoComponent5 = () => {
-    const exec = () =>
-    {
+
+    const [rowNum, setRowNum] = useState(0);
+    const [inputValue, setInputValue] = useState("");
+
+    const handleChange = (event) => {
+        if (!isNaN(event.target.value)) {
+            setRowNum(event.target.value);
+            setInputValue(event.target.value);
+        } else {
+            alert('Not a number');
+            setInputValue("");
+        }
+    }
+
+    const exec = () => {
         PDFEngine();
         window.print();
     }
     return (
         <>
-            <button className="float-right btn btn-primary" onClick={exec}>Execute</button>
+            <div style={{ display: 'flex', flexDirection: 'row', border: '1px solid #dedede', width: '50%', height: '200px', backgroundColor: 'white', padding: '5px', borderRadius: '10px' }}>
+                <div style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '2px', margin: '5px' }}>
+                    <div style={{ backgroundColor: 'white', width: '50%', padding: '2px', marginBottom: '20px' }}>
+                        <h4>PDFEngine</h4>
+                    </div>
+                    <div style={{ display: 'flex', flexDirection: 'row', marginLeft: '10px' }}>
+                        <input value={inputValue} style={{ border: '.5px solid lightGray', outline: 'none', backgroundColor: '#f2f2f2', borderRadius: '5px' }} placeholder=" Enter row number" type="text" name="name" onChange={handleChange} />
+                        <button style={{ marginLeft: '5px' }} className=" btn btn-primary" onClick={exec}>Remove</button>
+                    </div>
+                </div>
+                <div style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '5px' }}>
+                </div>
+            </div>
+
             <br />
             5
             <br />
             <div>
                 <br />
-                <table className="table table-hover table-outline mb-0 d-sm-table" code="br-removerow-0">
+                <table className="table table-hover table-outline mb-0 d-sm-table" code={`br-removerow-${rowNum}`}>
                     <thead className="thead-light">
                         <tr>
                             <th className="text-center"><CIcon name="cil-people" /></th>