Table of Cards

web
mobile

Topic: Table of Cards

afshinshahpari@gmail.com pro asked a year ago

Hi,

I need to have a scrollable list of cards that can dynamically add card or remove card from that.

Please advice what is the best solution to have that? Can table rows be of type card?

Thanks


Jakub Mandra staff premium answered a year ago

Hi there,

Table elements can't be changed with other types.

You can use wrap your cards in MDBScrollbar container. Here are the docs: https://mdbootstrap.com/docs/react/advanced/scroll/

If you have any further questions, please do not hesitate to contact me directly.

Best,

Jakub


afshinshahpari@gmail.com pro commented a year ago

Hi @Jakub,Thanks for your advice. The problem is not just scrolling, I need also to connect it easily to an array and each card is a row of a grid. I need to have row index to refer to related node of array. in this case what is the best scenario?Thanks


Jakub Mandra staff premium commented a year ago

I think I would just use regular map function in this case to build all the markup.

    <MDBScrollBar>  
      {
          cardArr.map((card, index) => 
            <MDBRow id={index} key={card.id}>
              <MDBCard>
                (...)
              </MDBCard>
            </MDBRow>
          )
        }
  </MDBScrollBar>

afshinshahpari@gmail.com pro commented a year ago

Hi jakub,

Thanks for the code sample.

I get blank screen after using the mentioned code but when I remove "MDBScrollBar> and use the rest of your code, it shows the array content without scroll bar.Even when using the scrollbar sample shown in tutorial it shows blank Screen!

I am using react 4.11.

  <MDBScrollBar>
    <img
      alt=""
      src="https://mdbootstrap.com/img/Photos/Others/img%20(51).jpg"
    />
  </MDBScrollBar>

Jakub Mandra staff premium commented a year ago

As in documentation, MDBScrollbar has to be wrapped inside some container with defined max height and/or width to work.

Try this code (remember to attach your variables):

import React from "react";
import { MDBContainer, MDBScrollbar, MDBRow, MDBCard } from "mdbreact";

const ScrollBarPage = () => {
  return (
    <MDBContainer style={{ width: "800px", height: "400px" }} className="mt-5">
      <MDBScrollbar>
        {
          cardArr.map((card, index) =>
            <MDBRow id={index} key={card.id}>
              <MDBCard>
                (...)
              </MDBCard>
            </MDBRow>
          )
        }
      </MDBScrollbar>
    </MDBContainer>
  );
}

export default ScrollBarPage;

Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: React
  • MDB Version: 4.11.0
  • Device: Mac
  • Browser: Chrome
  • OS: MacOS
  • Provided sample code: No
  • Provided link: No
Tags