CODEWITHSUNDEEP
cssreactjssemantic-uisemantic-ui-react
Contentop
Contentop

Reputation: 1241

How to make a table responsive in Semantic-UI-React?

Right now I have a long and wide table. It takes all of the 16 spots in the grid and looks good on desktop. But, when I view it on mobile it stretches the whole page. I don't seem to understand how to make it responsive so it will fit in a mobile view.

Anyone have experience with this and managed to do it?

Upvotes: 2

Views: 5017

Answers (2)

TechnoCat
TechnoCat

Reputation: 684

Even before considering the technical aspects of this question, you need to think about the user experience you would like to achieve - which depends on the nature of the data you are presenting and how to present that data meaningfully to your users. In other words, there is a difficult design challenge to be solved before you look at the technical aspects of implementing that design.

Suppose your table was about economic data, with 20 different economic stats as column headings and 600 rows of monthly records, what would you like your user to see initially when they hit your site from a mobile device? Can you break the giant table into several smaller tables for viewing on a mobile?

Have a look at how other sites have solved the problem. One good example is the front page of https://tradingeconomics.com.

When viewed in full on my Macbook Pro, this page shows twelve columns of data (GPD, interest rate, ..., population), one for every country. As you narrow down the browser window (i.e. simulating a mobile device such as an iPad or an iPhone), individual columns drop off progressively - from 12 to 10 and then to 4. What happens to the columns that drop off? They appear in a separate table.

A further thing to notice is the obvious use of a "more" button to display the full set of rows (the list of countries), so that users on a mobile device are presented initially with a manageable number of rows.

Over the years I've seen various great sites and books (e.g. to do with datatables and UX) that discuss how others have solved the same sorts of issues that you have now, but I won't make any recommendations as the methods will depend upon your design needs.

Once you have a look at how other sites have solved the design problems, given their specific data, the technical question of how to achieve this (e.g. via Semantic UI CSS themes or other techniques) will be easier to define.

Upvotes: 0

Mansoureh Sadeghi
Mansoureh Sadeghi

Reputation: 51

you can use Responsive tag to make your page responsive for each tools. like this :

const App = () => (
  <Container>
    <Table>
      <Table.Body>
        <Table.Row>
          <Responsive as={Table.Cell} minWidth={Responsive.onlyMobile.minWidth}>
            Foo
          </Responsive>
          <Table.Cell>Bar</Table.Cell>
          <Responsive as={Table.Cell} minWidth={Responsive.onlyMobile.minWidth}>
            <Responsive
              as={Table.Cell}
              minWidth={Responsive.onlyMobile.minWidth}
            >
              Baz
            </Responsive>
          </Responsive>
        </Table.Row>
      </Table.Body>
    </Table>
  </Container>
);

Upvotes: 3

Related Questions