Table of Cards


Topic: Table of Cards

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 6 years 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 commented 6 years 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 6 years 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 commented 6 years 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 6 years 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.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

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