Divide the information in the table across several pages for easier printing

Question

Divide the information in the table across several pages for easier printing

I have encountered an architectural challenge with my server-side React app. The app renders charts and tables with page breaks in between to allow a puppeteer instance to print the report for users in another application.

The issue I'm facing is making the data printable without manual pagination. The data needs to flow seamlessly, extending until a page break is necessary, then continuing onto a new page for the next set of information. The complexity lies in the dynamic nature of the data, including varying row heights and widths.

My current approach involves measuring the table's height after each row insertion to determine if it exceeds the max height limit. If it does, a new table with a page break is initiated.

I've explored existing solutions like applying CSS page break rules but found them unsuitable due to specific requirements like custom headers and footers displaying metadata related to the content.

I have provided a sample code snippet in this CodePen, demonstrating the layout I'm trying to achieve. The footer element should appear on both printed pages and reflect the number of rows displayed per page dynamically, which eliminates the possibility of using a static footer within the table structure.

I am considering hiding the table during rendering, gradually calculating its height as rows are added to implement my initial method effectively. However, I remain open to alternative suggestions or insights from others familiar with such challenges.

javascript html css reactjs

Answer 1

Answer №1

Okay, I believe I have figured it out. While there is room for improvement and optimization in the code, here is the basic idea: https://codepen.io/nicholaswilson/pen/abJpLYE. Currently, I am dividing the tables after they surpass a certain height, but I plan to refine this later on. The concept is clear.

Essentially, the approach involves constructing a 4D array to manage the instances of tables that require rendering. Then, in componentDidMount() and componentDidUpdate(), new tables are incorporated into the state when necessary:

componentDidMount() {
const { tableData } = this.props;

if (this.state.currentRowIndex === 0) {
  // initial setup
  this.setState((state, props) => {
    const tables = state.tables;
    tables.push([tableData.data[state.currentRowIndex]]); // add first new table and its first row
    return {
      tables,
      currentRowIndex: state.currentRowIndex + 1,
      currentTableIndex: 0
    };
  });
}

}

componentDidUpdate() {
    const { tableData } = this.props;
    if (this.state.currentRowIndex < tableData.data.length) {
      this.setState((state, props) => {
        const tables = state.tables;
        const currentTableHeight = this.tableRefs[this.state.currentTableIndex]
          .clientHeight;
        console.log(
          `Table ${this.state.currentTableIndex} height: ${currentTableHeight}`
        );
        if (currentTableHeight > MAX_TABLE_HEIGHT_IN_PIXELS) {
          // add a new table based on this condition
          tables.push([tableData.data[state.currentRowIndex]]);
          return {
            tables,
            currentRowIndex: state.currentRowIndex + 1,
            currentTableIndex: state.currentTableIndex + 1
          };
        } else {
          tables[state.currentTableIndex].push(
            tableData.data[state.currentRowIndex]
          ); // add new row to existing table
          return {
            tables,
            currentRowIndex: state.currentRowIndex + 1,
            currentTableIndex: state.currentTableIndex
          };
        }
      });
    }
  }

Refer to the codepen for the complete implementation details.

Answer 2

Okay, I believe I have figured it out. While there is room for improvement and optimization in the code, here is the basic idea: https://codepen.io/nicholaswilson/pen/abJpLYE. Currently, I am dividing the tables after they surpass a certain height, but I plan to refine this later on. The concept is clear.

Essentially, the approach involves constructing a 4D array to manage the instances of tables that require rendering. Then, in componentDidMount() and componentDidUpdate(), new tables are incorporated into the state when necessary:

componentDidMount() {
const { tableData } = this.props;

if (this.state.currentRowIndex === 0) {
  // initial setup
  this.setState((state, props) => {
    const tables = state.tables;
    tables.push([tableData.data[state.currentRowIndex]]); // add first new table and its first row
    return {
      tables,
      currentRowIndex: state.currentRowIndex + 1,
      currentTableIndex: 0
    };
  });
}

}

componentDidUpdate() {
    const { tableData } = this.props;
    if (this.state.currentRowIndex < tableData.data.length) {
      this.setState((state, props) => {
        const tables = state.tables;
        const currentTableHeight = this.tableRefs[this.state.currentTableIndex]
          .clientHeight;
        console.log(
          `Table ${this.state.currentTableIndex} height: ${currentTableHeight}`
        );
        if (currentTableHeight > MAX_TABLE_HEIGHT_IN_PIXELS) {
          // add a new table based on this condition
          tables.push([tableData.data[state.currentRowIndex]]);
          return {
            tables,
            currentRowIndex: state.currentRowIndex + 1,
            currentTableIndex: state.currentTableIndex + 1
          };
        } else {
          tables[state.currentTableIndex].push(
            tableData.data[state.currentRowIndex]
          ); // add new row to existing table
          return {
            tables,
            currentRowIndex: state.currentRowIndex + 1,
            currentTableIndex: state.currentTableIndex
          };
        }
      });
    }
  }

Refer to the codepen for the complete implementation details.

Divide the information in the table across several pages for easier printing

Answer №1

Similar questions

Tips for making Ajax crawlable with jQuery

Live server feature in Visual Studio Code is not able to update CSS styles

Is there a way to automatically increase a value by clicking on it?

Does an href and click events both happen simultaneously?

Convert an array into a JSON object for an API by serializing it

VueJS functions properly on Google Chrome, however it may encounter compatibility issues when using

Utilizing Express-Partials in conjunction with a single layout to incorporate multiple partials

Trouble with setting state in React using hooks

Utilizing ScrollView Component in React Native

Vue.js does not display HTML properly within the vue-swal component

What is the inability to place a div that is 30% wide alongside another div that is 70% wide, and keep them in a horizontal line?

Implementing HTML tags in C# code

What should we do to resolve the uncommon use of the 'this' es-lint error? Which rule should we disable?

Unable to match the array of objects based on the specified key indicator

Turn off the scrollbar without losing the ability to scroll

Position the table at the bottom of the page using CSS

The hook call at the Material UI TextField component is not valid

Guide on adding the .html extension to your URL in Nextjs

What method sits snugly between prepend() and append()?

Error in Babel-Loader when executing npm run build