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

When clicked, the menu disappears successfully with the "show" functionality, but unfortunately, the "hide" feature is not working as intended

Retrieve the 'current' scope using a 'master' controller

Guide on dynamically displaying a page based on the response from express/mssql middleware

The error message is failing to display the mat error

What is the best way to transform an HTML table into a jQuery array of key-value pairs?

The overflow-x: scroll !important feature is not functioning properly on Samsung Internet when using translated SVGs

Solving the Color Change Mystery in Your Dash Application

How about incorporating two subtly tilted SVGs for a creative twist on navigation backgrounds?

Choosing between Vue.prototype, Vue.use, and import for each fileWhen it comes

Obtain an item from an array by utilizing the property with Lodash _.find

Struggling to craft an accurate GraphQL request to Yelp

Chosen Dropdown selection - Retrieve/Receive information

Unable to get create-react-app to function properly

Maintain authentication state in React using express-session

How to align an element to the bottom using CSS without relying on the parent's height

Select multiple items from a list in HTML using the power of jQuery with a Multi Select

Limit the Jquery selection specifically to elements on the modal page

What could be causing the Custom CSS file to stop functioning properly?

Developing a typescript React component with a generic callback event handler function passed as a prop

Difficulty arises in bookmarking slug paths within Next.js SSG