Enhancing the Appearance of NextJS React Data Tables

Task:

  • I need to display a large DataTable in the UI with both horizontal and vertical scrolling capabilities

Issue:

  • Unable to enable scrolling on the X axis
  • UI cuts off the first half of the table unless zoomed out
  • UI becomes unusable

Tried:

  • Reviewed and adjusted various properties
  • Read and implemented custom styles from the git documentation
  • Explored adding extra HTML tags and styles to enable overflowX for scrolling

Details:

  • Table has around 50-60 columns
  • 200+ rows
  • Using React-Data-Table-Component
  • Component uses a custom solution with numerous div tags (observed when inspecting the react-data-table-component on the website)

Needs solution:

  • Need to enable horizontal scrolling within the table
  • Unable to view the left portion of the table

Example Column:

    {
    name: 'header1',
    id: 'header1',
    maxWidth: 'auto',
    minWidth: 'auto',
    selector: row => row.data1,
    sortable: true,
    compact: true,
},

Example Table:

<div style={{ overflowX: "visible", scrollSnapAlign: "start" }}>
            <DataTable
                columns={DataTableHeaders}
                data={filteredItems}
                pagination
                paginationComponentOptions={paginationComponentOptions}
                selectableRows
                defaultSortField="name"
                subHeader
                subHeaderComponent={subHeaderComponent}
                subHeaderAlign={Alignment.CENTER}
                expandableRows
                expandableRowsComponent={ExpandedComponent}
                dense
                highlightOnHover
                fixedHeader
                persistTableHead
                responsive
                direction={Direction.LTR}
            //customStyles={customStyles}
            //theme="dark"
            //className={styleDataTable.rdt_TableRow}
            />
    </div>

Answer №1

It seems like the issue at hand can be resolved by specifying a fixed percentage width based on the visible area

        <div style={{ overflowX: "hidden", width: "94vw", alignItems: "flex-start" }}>
            <DataTable
                className={styleDataTable.rdt_TableCol}
                columns={DataTableHeaders}
                data={filteredItems}
                pagination
                paginationComponentOptions={paginationComponentOptions}
                defaultSortField="name"
                subHeader
                subHeaderComponent={subHeaderComponent}
                subHeaderAlign={Alignment.LEFT}
                expandableRows
                expandableRowsComponent={ExpandedComponent}
                dense
                highlightOnHover
                fixedHeader
                persistTableHead
                responsive
                direction={Direction.LTR}
            //customStyles={customStyles}
            //theme="dark"
            //className={styleDataTable.rdt_TableRow}
            />
    </div>

Take note of the width: 94vw which ensures the table fits within 94% of the visible area. This allows for horizontal scrolling without overflowing or disappearing data.

There may be a more optimal solution out there, but for the time being, this method works effectively.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Aligning a lowercase "i" element within a container

Is there a more effective way to center the "i" element within this div without using specific pixel margins that adjust based on hover? Below is my code snippet: HTML: <div class="nav-collapse"> <i class="fa fa-bars fa-2x" id="bars"></ ...

What is the best way to implement auto-saving functionality for multiple form fields in a React application?

Whenever I make changes to the first and second columns of an item in a text field, the onBlur event triggers an auto-save. This results in the entire row being reloaded due to the update caused by the first column's save. Is there a way to prevent t ...

Tips for extracting the value and ID of selected checkboxes from a multi-select using Material-UI

I am currently utilizing the MUI select component with multi-select functionality. I have a JSON array below for rendering the multi-select options. Is there a method to retrieve both the ID and value of the selected item? For reference, you can view the ...

Ensuring all Bootstrap columns have equal height to match the tallest one

I have several .col-md-2 elements on my Bootstrap website, each containing an image of varying height. I am looking to ensure that all the columns have the same height so that I can align the images horizontally. Below is the HTML code: <div class="r ...

Unwrapping React: Mastering the Art of Prop Extraction and Sharing

Imagine I have 2 input elements below, both with the same props except for the className <ReactCardFlip> <input type="text" maxLength={1} className={inputStyles.input} defaultValue={value} ...

type of key extractor is unknown in React Native

How can I specify a type for the renderItem function of a FlatList in React Native? This is my current approach: // Importing the generic type for the FlatList render item function import { ListRenderItem } from "react-native"; // Assigning the ...

Invoking two asynchronous functions in React, where the first function relies on the state modified by the second function

Currently, I am working on an app that utilizes the Geoapify API. Within this app, I have implemented three primary API functions. Users are presented with two options on the user interface: they can manually search for cities or utilize their current loca ...

Using a for loop to render components in React

    I am attempting to create 9 buttons by setting x=3 and y=3 within a for loop in my render button method. However, I am facing an issue where the buttons are not being rendered correctly. When I use console.log, it shows that the rendering is happeni ...

Guide to adjusting the screen resolution on your iPad 3

Hello everyone, I'm fairly new to designing for the iPad 3. Could someone please provide some guidance on how to set media queries specifically for the iPad 3? Thank you in advance. ...

What steps should I follow to change the appearance of this object to match this?

Attempting to modify the value of an object nested within an array, which is in another object. The nesting might be a bit complex... Here's how it currently looks { household and furniture: [{…}, {…}], school stuffs: [{…}, {…}] } M ...

Tags that adhere to W3C compliance for struts

I'm facing an issue with a web page created using struts tag libraries. When attempting to validate the page on w3c.org, all the struts tags are showing up as undefined. For example, <html:button> appears as undefined. The DOCTYPE I used is: &l ...

Unable to retrieve file paths for assets using Node.js Server and Three.js

I am facing challenges when it comes to loading 3D models from a folder on my computer using a localhost node.js test server with the three.js library. Below is my app.js file that I execute via command line in the project directory using the 'node a ...

Creating "search result pages" with HTML, PHP, Javascript, and MySQL

Consider the scenario where you have a table with two columns: id and name, containing thousands of rows. You have a search engine that allows searching by free text, using the query: SELECT * FROM `table` WHERE `name` LIKE '%$search%' The res ...

Is there a way to enclose a mention within a unique span tag after highlighting it? Similar to how tags are implemented on platforms such

Currently utilizing an AngularJS plugin called ment.io for incorporating mentions. However, I am having difficulty figuring out how to customize the appearance of the selected mention. For example, in Stackoverflow: https://i.sstatic.net/bZrkh.png Or i ...

Repeated Values Issue in Material Ui List Function

Struggling to display only the newly added todo item in the list? Utilizing the material ui library for list creation, I have successfully displayed the new item. However, instead of showing just the specific value that was added, the entire array is being ...

Tips for implementing visual alterations using dynamically generated HTML scripts

When I dynamically generate HTML code from markdown, I typically wrap it in the <p></p> tag like so: <p class="embedded_markdown"> ... <h1>...</h1> ... <h3>...</h3> ... </p> I decided to experiment with sho ...

Utilizing AJAX for showcasing the data from an XML document

Our professor gave a brief explanation of AJAX, expecting us to showcase the data from an XML file in a scrollable text area on our website. Unfortunately, I am facing issues with loading the XML file into the designated div area. Any assistance or suggest ...

Scrolling down the list of messages to display the most recent entries can easily be achieved through React and Material UI by implementing an

I am currently in the process of creating a chat bot that will send messages for sales queries. However, I am facing difficulty in implementing an automatic scroll to the bottom of the message list. This image shows what is happening instead: https://i.ss ...

Waiting for user submission before executing a JavaScript function

const onSubmit = ()=>{ someFunction().then(()=>{ // next step is to wait for user interaction by clicking a specific button // user initiates the action // perform specific task }) } Essentially, after the initial form submissi ...

Troubles with exporting Static HTML in NextJS

I'm currently navigating my way through Next.js and attempting to deploy a project in HTML format. To export your Next.js app in HTML, first develop it as you normally would. Then run: next build && next export You may need to update the scri ...