React table Component onClick fullscreen-CodePudding

I'm working on dashboard that contain many visuals along with Table. But based on the user selections table can be large and data within the table can be too small to read. Because of that I need to make that visual full screen with button click.

Also to exit the full screen? What is the best way to do it without making code too complex?

code:

import "./styles.css";

export default function DataTable7() {

  let totalWeeks= 10;

  const rawData = [
    [15,'','','',1,'',1,'','',5,8,7],
    [7,'','','',1,'',1,'','',5,2],
    [6,'','','','','','','',6,0],
    [3,'','','','','','',2,0],
    [2,1,'','','','',1,1],
    [2,'','','','',2,0],
    [1,'','','',1,0],
    [2,'',1,1,1],
    [2,'',1,0],
    ['-','-','-']
    ];


  const makeFullscreen = () => {
    element.requestFullscreen()
  }



  
  return (

    <>
    <div>
    <div className="tableContainer">
    <table className="lostAssets">

      <thead>
        <tr>
          <th>Week</th>
          

          {new Array(totalWeeks).fill(null).map((_, i) => {
              return <th>{i 1}</th>;
            })}

          <th>Win</th>
          <th>Lose</th>
        </tr>
      </thead>


      <tbody>

        {rawData.map((item, index) => {
          return (
            <>
            <tr>
              <th>{index   1}</th>
              {[...Array(rawData[0].length - item.length)].map((item) => { 
                return <td></td>;  //for empty values
              })}
              {item.map((itm) => {
                return <td>{itm}</td>;
              })}
              
            </tr>
            
            </>
          );
        })}

      </tbody>
      
    </table>
    </div>
    <button onClick={makeFullscreen}>
      Full Screen
    </button>
    </div>
    </>  
  );
   
}

CSS:

table, tr, td, th {
  border: 1px solid #9b9b9b;
  border-collapse: collapse;
  
  text-align: center;
  padding: .4em;
}

.tableContainer{
 
  height: 200px;
  width: 390px;
 
  overflow: scroll;
}

Table thead{
  position: sticky;
  top: 0px;
  margin: 0 0 0 0;
}

CodePudding user response：

You can use this code snippet.

export default function DataTable7() {
  const ref = useRef();
  const makeFullscreen = () => {
        var elem = ref.current;
        if (elem.requestFullscreen) {
            elem.requestFullscreen();
        } else if (elem.webkitRequestFullscreen) {
            /* Safari */
            elem.webkitRequestFullscreen();
        } else if (elem.msRequestFullscreen) {
            /* IE11 */
            elem.msRequestFullscreen();
        }
  }
  ...
 <table ref={ref} className="lostAssets">
  ...
}

Also make sure to keep the background color as white for the table else the text won't be visible.

table, tr, td, th {
  background: white;
  border: 1px solid #9b9b9b;
  border-collapse: collapse;
  
  text-align: center;
  padding: .4em;
}

Basically we are referencing the table container div into using useRef and making that element fullscreen by using the native javascript browser method.