diff --git a/src/lib/viewers/text/BoxCSV.js b/src/lib/viewers/text/BoxCSV.js index 63bd1a9a78..dd82f7c1b4 100644 --- a/src/lib/viewers/text/BoxCSV.js +++ b/src/lib/viewers/text/BoxCSV.js @@ -73,7 +73,8 @@ class BoxCSV { */ renderCSV() { const rowCount = this.data.length; - const columnCount = this.data[0].length; + const rowSample = this.data.sort((a, b) => b.length - a.length)[0]; // Find the row with the most columns + const columnCount = rowSample.length; const maxWidth = this.csvEl.clientWidth; const maxHeight = this.csvEl.clientHeight; diff --git a/src/lib/viewers/text/__tests__/BoxCSV-test.js b/src/lib/viewers/text/__tests__/BoxCSV-test.js index d731786523..17268ddb72 100644 --- a/src/lib/viewers/text/__tests__/BoxCSV-test.js +++ b/src/lib/viewers/text/__tests__/BoxCSV-test.js @@ -65,5 +65,14 @@ describe('lib/viewers/text/BoxCSV', () => { expect(gridComponent.props.rowCount).to.equal(3); expect(renderStub).to.be.calledWith(gridComponent, csvComponent.csvEl); }); + + it('should base its column count based on the longest available row', () => { + const renderStub = sandbox.stub(ReactDOM, 'render'); + csvComponent.data = [[1], [1, 2], [1, 2, 3], [1, 2, 3, 4], [1, 2]]; + csvComponent.renderCSV(); + + const gridComponent = renderStub.firstCall.args[0]; + expect(gridComponent.props.columnCount).to.equal(4); + }); }); });