Questions tagged [material-table]

After clicking Add Row in the material table, a new edit row is currently displayed at the bottom of the table. This can be quite inconvenient when there are multiple rows per page as the user would need to scroll down each time to add anything. To improv ...

Is there a way to utilize a custom CSS file in the useStyle function of Material UI? I have created a separate useStyle file and would like to incorporate its styles. Can someone explain how this can be accomplished? input[type="checkbox"], inp ...

I am currently utilizing the material-table library with React to handle remote data. When no search results are found, I am attempting to figure out how to hide the spinner and display a message stating "No records to display". The search function trigger ...

I've made a modification to the layout of the detail panel icon (mui ChevronLeft) so that it now appears on the right side of the table by using the options={{detailPanelColumnAlignment: "right"}} property. TableIcons : DetailPanel: forwardR ...

I'm currently working on a table that pulls data from an API and presents it in either an MUI table or Material table. I would like to have different action buttons displayed for each row - for example, in the first row, the button should read "connec ...

I am utilizing the tool material-table to showcase table data while also incorporating filters for a specific column located outside of the table. For instance: https://material-table.com/#/docs/features/filtering My goal is to filter only the "birth pl ...

Could a nested column table be created using the material-table library? The desired final outcome I am aiming for ...

Hey everyone, I'm looking to include icons in the Material Table header column. How can I achieve this? Is it possible to add icons to the Header column in a Material Table? Sample Code: function CustomizeActionsColumn() { return ( < ...

I am currently working on customizing the table pagination actions in Material UI's table and I need to remove the labelDisplayedRows function. My goal is to only show next/previous icons in the footer without the counter (e.g., 1 of 5). I managed t ...

Is there a way to display the filter option only for specific columns, such as First Name, without it appearing on other columns like Id, Last Name, and Full Name? https://i.stack.imgur.com/HdBcp.png import React, { useEffect, useState } from "react& ...

Is there a way to modify the style of checkboxes in filtering? For instance, if I wish to adjust the dimensions of the checkbox that appears for the Birth Place field, what steps should I take? https://i.stack.imgur.com/pZLqQ.png ...

I am looking to enable row actions only for specific rows that meet certain property values. For instance, if a row has the isDeletable property set to true, I would like to display a delete icon in the actions column for that row. Your help is greatly ap ...

I encountered an issue with my code involving a Collapsible list triggered by an Icon Button. After sorting the table and then expanding the list, the table reverts back to its original unsorted state. I am puzzled as to why this is happening. <Material ...

Question: How can I ensure that text automatically wraps when inputting extremely long names in MaterialTable? I've encountered an issue with Material Table where, when entering a very lengthy name such as "LONG NAME LONG NAME LONG NAME LONG NAME," the li ...

I've spent several days searching for a solution without any luck. My project involves using material-table in React, and I am struggling to apply CSS styles to the headers (columns) and content (such as changing font size, adjusting width, and creating st ...

Currently utilizing the material-table to display data. My goal is to select one row at a time and pass that row's data to another component. Multi-row selection is not desired, so using radio buttons instead of checkboxes is the suggested solution. Is t ...

I am looking to customize the material table headers by adding a button next to each column header, while still keeping the default features like sorting and drag-and-drop for column rearrangement. Currently, overriding the headers requires replacing the e ...

I recently experimented with the material-table library to perform basic CRUD operations. Utilizing onRowAdd, onRowUpdate, and onRowDelete, I was able to incorporate icons for each function. However, I am interested in changing the color of these icons. Ca ...

I have noticed that the default page index in the material table is set to '0', but the API I am currently using begins with a page index of '1'. Is there a way to adjust the default page index of the table to match that of the API? ...

Greetings everyone, I am currently using a material table but I have encountered a styling problem where the search fields are not aligned as shown in this screenshot. I am unsure how to fix it. Any suggestions? Thank you in advance. ...

Currently, I am implementing a GraphQL query to fetch data for my Material UI table. My goal is to achieve infinite scrolling functionality when loading more data onto the table. Although the data is being populated correctly in the table itself, there se ...

Currently utilizing the MaterialTable component sourced from material-ui, I've encountered two issues that require resolution. 1. Is there a way to ensure equal spacing of columns? Currently, there seems to be an unnecessary amount of space between t ...

Hey there, I've been working on setting up a front-end display for a table using material-table in React. Everything has been going smoothly until I noticed some strange pagination icons instead of the usual arrows. Here's a screenshot for reference: Weird ...

I have a table displayed below and currently using version @material-table/core: 0.2.52 <MaterialTable isLoading={loading} title="" columns={[ {title: 'Track', field: 'track'}, {title: 'Tier', field: 'tier'}, ...

Utilizing Material-UI along with material-table for my app. I have implemented a global theme in the "index.js" file using "ThemeProvider" and included the following components: <Fragment> <CssBaseline /> <MenuAppBar /> < ...

I have implemented the use of actions in my rows using Material-Table, but I am seeking a way for the action to open a dialog when clicked (Material-UI Dialogs). Is there a way to accomplish this within Material-Table? It seems like Material-UI just appen ...

Is it possible to retrieve the current page data even after sorting? I am able to get the current page data after pagination changes, but not after sorting. The onOrderChange function only returns the column id and direction. Is there a way to get the sor ...

Currently, I am utilizing React along with material-ui and material-table in my project. One issue I am facing is with a closable tab panel where the corresponding panel components are not unmounted when tabs are switched. Instead, they are just hidden wi ...

I'm currently utilizing the material-table library and I'm struggling to individually change the color of each icon. Could you assist me with this? I attempted custom CSS, but it's affecting all icons at once instead of specific ones. Here i ...

In my React project, I am utilizing material-table (https://material-table.com/#/) and have successfully imported the necessary icons. However, when viewing the action bar, the icons are displaying as plain text instead of the Material Icon. import React, ...

Query: How do I utilize the Material-Tables "lookup" function to automatically populate a row based on the selected option? I have an array containing crucial data values, and my goal is to prefill the row with information from the array when a selection ...

Whenever I scroll up or down in my Material-Table, and then switch pages, the vertical scroll bar doesn't reset to the top of the table. Instead, it stays where it was before changing the page, causing confusion for users. The only mention of scroll ...

I have integrated material-table into my react project and am facing an issue with centering the table title. Here is a live example on codesandbox: https://codesandbox.io/s/silly-hermann-6mfg4?file=/src/App.js I specifically want to center the title "A ...

I was facing an issue with calling a function in the material table (https://github.com/mbrn/material-table) when new data is received. I attempted to solve it using the following code. useEffect(() => { console.log(ref.current.state.data); ...

I am currently utilizing the material-table plugin in ReactJS to generate a dataTable. However, I have not been able to identify a straightforward method or option within the plugin to implement rowspan or column span functionalities. Is there a workaround ...

I encountered the following error: ERROR in Can't have multiple template bindings on one element. Use only one attribute prefixed with * (" <mat-header-cell> <mat-cell *matCellDef="let order" class="{{orderColum ...

I am struggling to add margin to the right of a mui table with no success. Below is the code I have used: <TableContainer> <Table sx={{ mr: 100 }} aria-label="customized table"> <TableHead> <Tabl ...

I would like to have a distinction between clicking on a checkbox and clicking on a row. Specifically, I want the following behavior: when I click on the checkbox, only the checkbox should be checked; and when I click on the row, only the row should be se ...

https://i.stack.imgur.com/q2sTF.png I am trying to arrange the action column as the final column in my table setup. Below is the code snippet: <MaterialTable title="Patient List" columns={state.columns} data={data} onRowClick={(event, rowData) ...

Is there a way to redirect to another page while passing selected row data as a prop? I am using material-table and I need to transfer the selected rows data to another page upon clicking the "Export" button, so that I can utilize the data in generating a ...

I'm having trouble getting vertical scroll to work with my material table in React Typescript. Horizontal scroll is functioning properly for large data, but I'm stuck on implementing the vertical scroll. Here's my code: {isLoading ? (<Spinner&g ...

Currently incorporating material UI into my project and looking to add an action button in my material table. However, upon trying to include the table, the action header is not displaying as expected. https://i.stack.imgur.com/s6cjE.png https://i.stack. ...

After calling the fetch function in the useEffect, my getUsers function does not populate the data variable. I am unable to see rows of data in the MaterialTable as the data structure is in columns. I need help figuring out what I'm doing wrong. functio ...

I'm currently working on creating a table with the material UI. My goal is to populate the rows of the table based on the data received from an API response. The challenge I'm facing is that the API response includes an array of objects with mult ...

Is it possible to customize the sorting icons on React Material-Table table header columns? For example, I would like the ascending sorting icon to be ArrowDownward and the descending sorting icon to be ArrowUpward. I have attempted to set the SortArrow ic ...

Currently, I am utilizing a tool called material-table (check it out here: https://material-table.com/#/) which has been developed using React. The issue I am facing is that the data passed as a prop to material-table doesn't seem to update correctly ...

Currently, I am in the process of developing a data display feature for my application and have been exploring various data table components that are constructed using Material UI. One question that has arisen is whether it is feasible to incorporate Mater ...

I've recently started working with React and I'm utilizing a special component known for its unique filtering functionality that I couldn't find elsewhere. This component typically shows 10 rows of data by default. Whenever I apply filters ...

I am currently working on a project that involves utilizing a table, specifically the material-table. However, I am facing an issue where the required icons for the table are not displaying properly and instead placeholder texts are showing up. Below is t ...

I'm struggling with setting the default sorting for a Material UI table. Is there a more straightforward way to do this without using a button at the top? I want the table to automatically sort by protein when it is loaded. import * as React from &apo ...

The image above showcases a MaterialTable containing various information and offering the ability to execute (1) actions as well as expand a detailed panel to view more information. The code snippet below functions flawlessly within the application: <Ma ...

I am working with the material-table and I want to incorporate colspan and rowspan in it. Despite searching for examples and samples, I have not found anything relevant. Currently, this is how I am structuring the material table: <TableHead> &l ...

Having an issue with data overflow in my MaterialTable from material-ui when viewed on mobile devices. It displays fine on desktop, but the table data spills over on smaller screens. How can I resolve this problem? <MaterialTable className={clas ...

Currently, I am attempting to implement pagination for material table data using TablePagination. One issue I am facing is that the pageSize property, initially defined as a state variable, does not update when the selected pageSizeOptions change. Despite ...

I have been working with the material-table library and I am trying to achieve the same expandable search text field functionality as shown in this example from Material-UI's documentation. However, I am facing challenges in customizing the style of the se ...

I'm currently tackling the challenge of creating a MaterialTable that includes an inline editable field with a dropdown feature. The hurdle I am facing appears to lie within the columns object. By utilizing the lookup attribute, it is possible to defi ...

Currently, I am utilizing Material-UI tables in my project and have added an id column to the basic table available here. If I have a page with this basic table example located at localhost:3000/basic-table within my React application, how can I transform ...

I am interested in incorporating star ratings into my cell designs using Material-Table, similar to the examples provided by Material-UI here: https://material-ui.com/components/rating/ Is it possible to achieve this effect in Material-Table? I have been ...

I recently started learning reactjs and I encountered an issue with data communication between two components. In my application, I am using a material table to display the data. The create user form is located in a separate component. Whenever a new user ...

As a MERN newbie, I'm seeking assistance in creating a Stocks app. I've successfully fetched data using axios and presented it in a table using Material-Table. import React, {useState, useEffect} from 'react' import MaterialTable from 'material-ta ...

I've configured a material-ui table that includes a column rendering material-ui switch component for each row. Data is successfully passed to the switches through table data (rowData arg), as shown below. As each material-ui element maintains its own stat ...

Currently, I am utilizing the react material-table and looking to implement a more visually appealing scroll-bar instead of the default Pagination option. Although I have experimented with the react-custom-scroll package, it has not produced the desired ...

I am looking to enhance the material-table toolbar by adding a new button. This button will not be directly related to the table, but instead, it will open a modal window with additional information. The button I want to add is called "quotations" and I w ...

Is there a way to change the placeholder font size for Material UI Autocomplete? https://i.stack.imgur.com/x71k2.png <Autocomplete multiple id="tags-outlined" options={top100F ...

In the context of using a material table in React, the columns set up are as follows: columns={[ { title: 'Name', field: 'name', type: 'string', }, ...

Currently, I am experimenting with the library material-table and my goal is to add a highlighting effect to the row that I am hovering over. Even after referring to the official documentation, I could only find an example showcasing a color change on cli ...

import MaterialTable from "material-table"; import ShipmentContext from "../context/ShipmentContext"; const ItemsTable: React.FC = () => { const shipmentcontext = useContext(ShipmentContext); const { filtered } = shipmentcontex ...

I'm currently facing an issue with a custom rendered column that contains a menu button. When I click on the menu button, it opens up a menu like this: https://i.stack.imgur.com/4Lxd5.png Now let's take a look at the code snippet below: columns={[ { ...

Using Material Table to manage workstations, I encounter arrays in the data that are automatically displayed in cells without commas. See current behavior Here's what I'm aiming for I don't want to override the entire cell component or modify the fetche ...

When working with a Material UI table, I am utilizing an Action to view details of my data. Now, I am looking to navigate to a new page or render a new component when this action button is clicked. Can someone assist me in achieving this ...

I am currently utilizing the material-table library and I am interested in using the loading animation that is included in the library for a custom asynchronous operation. The desired functionality is to have the loading animation turn on when a custom a ...

If I want to replace the + icon in a material-table row with text like "ADD ROW," is there any way to do it? The material-table only accepts the icon object, and there doesn't seem to be another prop that allows for text replacement. I am utilizing th ...

I am looking to achieve a similar behavior as demonstrated in this example using the material-table library: https://codesandbox.io/s/table-hover-colors-zw9nt If you are interested in learning more about the material-table library, you can visit these li ...

My current setup includes a basic material-table structured like this: <MaterialTable options={myOptions} title="MyTitle" columns={state.columns} data={state.data} tableRef={tableRef} // Not functioning properly editabl ...

enter code hereI'm currently working on customizing the pagination component in material-table. The additional functionality I've implemented is functioning correctly, but I'm seeing warnings in the console. One of the warnings is as follows: Material-UI: ...