Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Domino987
    @Domino987
    @david_dev1111_gitlab can you share what you are doing in a sandbox?
    @edgar-pozadas-by just fork the repo, clone it do your machine and run npm i and npm start
    edgar-pozadas-by
    @edgar-pozadas-by
    thanks @Domino987
    kylenguyen1014
    @kylenguyen1014

    @Domino987 Did onSelectionChange change the behavior somewhere from v2.0.2 to v3.0.5. On v2.0.2, I use component's state to handle selection change

    onSelectionChange={rows => setSelectedRows(rows)}

    Now, when I update to v3.0.5, the checkboxes don't get checked

    Domino987
    @Domino987
    Can you show use more of your ocde or provide a sandbox?
    We remove the mutation of both the column and the data props, It might be caused by that.
    kylenguyen1014
    @kylenguyen1014

    @Domino987 so I found the issue. The issue appears when I have rowStyle as a function

    <MaterialTable
            title=""
            columns={React.useMemo(() => [
              { title: "ID", field: "id" },
              { title: "Name", field: "name" }
            ], [])}
            data={data}
            options={{
              selection: true,
              grouping: true,
              filtering: true,
              padding: 'dense',
              columnsButton: true,
              rowStyle: (rowdData : Sample) => {
                if (rowdData.id === 1) {
                  return {
                    backgroundColor: 'lightblue'
                  }
                } else {
                  return {
                    backgroundColor: 'lightpink'
                  }
                }
              }
            }}
            onSelectionChange={handleSelectionChange}
    />

    Sandbox sample : https://codesandbox.io/s/loving-pine-m0bgz?file=/src/App.tsx:1009-1295

    kylenguyen1014
    @kylenguyen1014
    It also appears with cellStyle as a function
    kylenguyen1014
    @kylenguyen1014
    Is there a workaround if I want to use rowStyle as a function ?
    Jean Santos Silva
    @jean07ss
    Guys, i can set a default sorting when table is loaded?
    Domino987
    @Domino987
    @kylenguyen1014 yes this looks like a weird specific bug, Would you mind openning an issue describing it?
    kylenguyen1014
    @kylenguyen1014
    Sure thing
    edgar-pozadas-by
    @edgar-pozadas-by
    Hi @Domino987 I want to know if there's the capability to execute any custom function for sorting instead the default?
    Michael San Gabriel
    @mike_san1_twitter
    Hello @Domino987 I am having an issue with the selection checkboxes on the table
    Right now I have two different tables on one page, that both display data from the same source
    So when I go and change any data from that source after selecting it, the checkboxes get deselected on both tables
    Is there a way to only make checkboxes uncheck only on the table they have been selected on?
    Domino987
    @Domino987
    @mike_san1_twitter what repo and versio nare you using?
    THis is connected to the mutation of the props from the original project
    Michael San Gabriel
    @mike_san1_twitter
    I am using the fork not sure what version
    But I was able to figure it out by using the selection props
    gokhansamet
    @gokhansamet
    Hello everyone, I have a problem that is related to re-render data. When I deleted/editted/added an item from the table to see the action I have to refresh page then I can see the action. In my material table I don't have a tablRef. Is it is the source of problem? If it is then how can I use the tableRef ?
    gokhansamet
    @gokhansamet
    I solved the problem with tableRef
    Michael San Gabriel
    @mike_san1_twitter
    @Domino987 So it turns out the problem was only slightly solved. The issue now is that even though the checkboxes don't show as being clicked, for some reason the table still saves them as being clicked
    So if I reselect some other checkbox all the checkboxes that used to be clicked now are clicked again
    Visually they are not checked but in the logic of the table they are so when you reselect another item then they all come back as being selected
    So is there a way to deselect all selected checkboxes on a button press?
    Michael San Gabriel
    @mike_san1_twitter
    But I am using '@material-table/core'
    Michael San Gabriel
    @mike_san1_twitter
    Version ^2.3.30
    Domino987
    @Domino987
    @mike_san1_twitter If you try out v3, you will see that the mutation of the props is removed and the data will not be synced anymore
    How did you do that with the selection props excatly?
    deselecting everything woudl work by setting all the .tableData.checked to false/true
    CompSciFlyGuy
    @CompSciFlyGuy
    Sorry if this has been asked and answered already, but I'm struggling to find the answer. I'm trying to use material-table for the first time and it seems to have a lot of cool features and is very easy to use for the most part. I'm using redux-saga with a scrollable table with onRowClick row color change functionality and I want to autoscroll the table to the selected/highlighted row when it's not in view. Also my implementation of the scrollbar has the bar starting at the top of the header instead of below the header even though the header ends up being "sticky". Is there a way to adjust this as well?
    Domino987
    @Domino987
    Hi @CompSciFlyGuy Welcome. That has not been ask as far as I know. You can override the row component and pass those a ref by wrapping the component. On click of the row, you access the ref, search for the correct row by id or something and call scrollIntoView on the table row element.
    Travis Kesterson
    @tkesterson
    Is there a way to set the value of the search box? I would like to be able to click a word on a row and have that word be the search box value
    gokhansamet
    @gokhansamet
    I'm trying to get MaterialTable to refresh after CRUD operation on a record. I saw code where: const tableRef = React.createRef<TableRef>(); and you call tableRef.current.OnQueryChange(). The problem is tableRef.current is always null after deleting the last record on the table. any clues on how to resolve?
    Domino987
    @Domino987
    @tkesterson You need to use the table ref and call datamanger.onSearch change or something to trigger a new value
    @gokhansamet Can you put that in a sandbox?
    gokhansamet
    @gokhansamet

    @Domino987 The project is an enterprise project therefore I can't share the codes but I show you what I do in the projects related to use tableRef.

        let tableRef = React.createRef();
    useEffect(() => {
            console.log(tableRef);
            tableRef.current.onQueryChange();
        }, [tableRef]);
    
    <MaterialTable
                    tableRef={tableRef}
                   ...
                />

    At first, I want to refresh table after the Crud operations and I did it but I have realized the problem that is if the
    last data (existing last data) was deleted in second page then projects had crushed. The message of the error is tableRef current is null.

    Domino987
    @Domino987
    I think you have to use the hook useRef unstead of createRef to persist it between renders.
    ANd tableref will be static, so no need to put it into the depenecy array [tableRef],
    gokhansamet
    @gokhansamet
    @Domino987 when I used useRef instead of createRef then the table was not re-rendering I have to refresh page to see new rows
    Domino987
    @Domino987
    Seems like this is not connected to the table itself. What kind of operation are you doing and how are you passing the data to the table If you pass new data to the table, it should just rerender. OR are you using the remote data prop to access data from the backend directly from the table?
    gokhansamet
    @gokhansamet
    As the operation I use delete/edit/add and I use remote data
    gokhansamet
    @gokhansamet
    I think I have to use connector because I use Redux
    current-is-always-null-when-using-react-createref
    Domino987
    @Domino987
    LEts continue that in a chat
    Hellen-Tsvia Rubin
    @tsviar

    I encountered great difficulty with material-table and Typescript.
    It refuses to work.
    here is my code, and I'd be happy to get an elaborated example for MT+TS

    return (
    // <!--<MuiThemeProvider theme={MainTheme}>

    <MainBox
      aria-label="Categories Main Box"
      id="Categories_Main_Box"
      name="Categories_Main_Box"
      role="article"
    >
    
      {loading_lists === false ? (
    
        <MainMenuContentWrapper
          aria-label="Categories Content Wrapper"
          id="Categories_Content_Wrapper"
          name="Categories_Content_Wrapper"
          role="application"
        >
            <ContentBox
            aria-label="Categories Content Table Box"
            id="Categories_Content_Table_Box"
            name="Categories_Content_Table_Box"
            role="directory"
          >
            <MaterialTable
              aria-label="Categories Material Table"
              id="Categories_Material_Table"
              name="Categories_Material_Table"
              role="table"              
    
              style={TableStyle}
    
              title={
                //  <h4 className={classes.tableTitleStyle}>Categories list</h4>
                <div style={TableTitleDivStyle}
                  aria-label="Categories Table Title div"
                  id="Categories_Table_Title_div"
                  name="Categories_Table_Title_div"
                  role="directory"
                >
                  <TableTitleStyled
                    aria-label="Categories Table Title"
                    id="Categories_Table_Title"
                    name="Categories_Table_Title"
                    role="note"
                  >
                    Categories list
                  </TableTitleStyled>
                </div>
              }
    
              // when using useState
              //--------------------------------------
              columns={local_categories_list.columns}      
    
              // when using useState
              //--------------------------------------
              data={local_categories_list.data}
    
              components={{
    
                Toolbar: props => (
                  <div
                    //style={{ display: 'flex', alignItems: 'center', }}
                    style={MTableToolbarStyle}
                    aria-label="Categories Table Toolbar Div"
                    id="Categories_Table_Toolbar_Div"
                    name="Categories_Table_Toolbar_Div"
                    role="directory"
                  >
                    {/* <MainTableToolBar> */}
                    <MTableToolbar {...props}
                      aria-label="Categories Table Toolbar"
                      id="Categories_Table_Toolbar"

    here is the rest:
    components={{

                Toolbar: props => (
                  <div
                    //style={{ display: 'flex', alignItems: 'center', }}
                    style={MTableToolbarStyle}
                    aria-label="Categories Table Toolbar Div"
                    id="Categories_Table_Toolbar_Div"
                    name="Categories_Table_Toolbar_Div"
                    role="directory"
                  >
                    {/* <MainTableToolBar> */}
                    <MTableToolbar {...props}
                      aria-label="Categories Table Toolbar"
                      id="Categories_Table_Toolbar"
                      name="Categories_Table_Toolbar"
                      role="toolbar"
                    />
                    {/* </MainTableToolBar> */}
                  </div>
                ),
    
              }}
    
    
              onRowClick={((evt, selectedRow) => set_selected_row({ selectedRow }))}
    
              options={{
    
                sorting: true,
    
                pageSizeOptions: [5, 10], // more then that look awefull...
    
                searchFieldStyle: TableSearchFieldStyle,
    
                headerStyle: TableHeaderStyle,
    
                cellStyle: TableCellStyle,
    
                rowStyle: rowData => ({
                  backgroundColor:
                    (
                      selected_row && selected_row.selectedRow
                      && selected_row.selectedRow.tableData.id === rowData.tableData.id
                    ) ? //'#EEE' : '#FFF'
                      // 'blue' : //'honeydew':// '#FFF'
                      `${main_palete_theme.palette.table_row_style.selected}` :
                      `${main_palete_theme.palette.table_row_style.regular}`,   //'oldlace', //'#FFF',
                  height: TableRowStyle.height, //40,
                  textAlign: TableRowStyle.textAlign, //'left',
                  fontFamily: TableRowStyle.fontFamily, //'Expletus Sans',
                  fontSize: TableRowStyle.fontSize, //`3rem`,//'1.4rem',
    
                }),
    
              }} //options
    
              icons={tableIcons}
    
              localization={localization_theme.categories_table}
    
              editable={{
    
                onRowAdd: newData => addCategory(newData),
                onRowUpdate: (newData, oldData) => editCategory(newData, oldData),
                onRowDelete: oldData => removeCategory(oldData),
    
              }}
    
            />
            {/* MaterialTable */}
    
            {/* </MuiThemeProvider> */}
    
          </ContentBox>
        </MainMenuContentWrapper>

    const TableStyle = {

    margin: 'auto',
    marginTop: 28,
    marginBottom: 180, // for 5 and 10 rows and add row
    padding: 'auto',

    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',

    overflow: 'auto',
    //overflow: 'scroll',
    //overflow: 'none',

    width: 'auto',
    minWidth: 'inherit',

    height: '100%',
    minHeight: 'inherit',

    }

    const MTableToolbarStyle = {
    backgroundColor: ${main_palete_theme.palette.header.main},
    // backgroundColor: '#01579b',
    // backgroundColor: '#039be5',

    color: ${main_palete_theme.palette.header.text_color}, //'#FFF',

    fontSize: 1.2rem,

    display: 'flex',
    //flexDirection: 'column',
    alignItems: 'space-around',
    //justifyContent: 'center',
    justifyContent: 'space-evenly',
    flexWrap: 'wrap',

    }

    const TableTitleDivStyle = {

    //visibility: 'visible',
    display: 'flex',
    //flexWrap: 'wrap',
    flexBasis: '0%',
    flexGrow: 1,

    '@media all and (min-width: 320px)': {
    display: 'flex',
    flexBasis: '41%',
    margin: 0,
    marginRight: 10,
    padding: 0,
    paddingRight: 10,
    flexGrow: 3,
    },

    }

    const TableTitleStyled = styled('h4')({

    color: ${main_palete_theme.palette.header.text_color},
    "&:hover": {
    color: ${main_palete_theme.palette.header.text_hoover_color},
    },

    fontSize: '1.2rem',
    
    //visibility: 'hidden',
    display: 'none',
    //width: 0,
    margin: 0,
    padding: 0,
    //width: '2rem',

    '@media all and (mi

    Domino987
    @Domino987
    @tsviar can you put that in a sandbox, so we can check it in line code. Also can you describe what is not working exactly? Did you check out the types file in the repo?