CODEWITHSUNDEEP
cssreactjsprintingtailwind-cssreact-to-print
datawiz95
datawiz95

Reputation: 43

Enable printing wide and long tables on multiple pages

I have a long and wide table I am working with. Here is an example The rows print on multiple pages just fine, but the columns are being truncated and I can't figure out a way to also have separate pages for the continuation of the columns.

I am using React with Tailwind. I am specifically using the react-to-print library to print out a component I have.

<ReactToPrint                               
      trigger={() => {
          return (
              <button className="px-4 py-2 font-bold border border-gray-300 rounded-md shadow-sm hover:bg-gray-100">
                  <CloudArrowDownIcon className="w-6 h-6" />
              </button>)
      }}
      content={() => componentRef.current}
  />

In my global.css

@layer utilities {
    @media print {
        .print\:page-inside-avoid {
            page-break-inside: avoid;
        }
    }
}

Upvotes: 1

Views: 208

Answers (0)

Related Questions