Как сделать таблицу адаптивной в Semantic-UI-React?

Question

Прямо сейчас у меня длинный и широкий стол. Он занимает все 16 точек в сетке и хорошо выглядит на рабочем столе. Но когда я смотрю его на мобильном телефоне, он растягивает всю страницу. Кажется, я не понимаю, как сделать его отзывчивым, чтобы он подходил для мобильного представления.

Кто-нибудь имел опыт с этим и сумел это сделать?

Answer 1

Даже перед рассмотрением технических аспектов этого вопроса вам необходимо подумать о том, какой пользовательский опыт вы хотели бы получить - который зависит от характера данных, которые вы предоставляете, и того, как осмысленно представлять эти данные своим пользователям. Другими словами, существует сложная задача проектирования, которую необходимо решить, прежде чем рассматривать технические аспекты реализации этого проекта.

Предположим, ваша таблица содержит экономические данные с 20 различными экономическими показателями в виде заголовков столбцов и 600 строками ежемесячных записей. Что бы вы хотели, чтобы ваш пользователь первоначально увидел, когда он попадает на ваш сайт с мобильного устройства? Можете ли вы разбить гигантский стол на несколько небольших столов для просмотра на мобильном телефоне?

Посмотрите, как другие сайты решили проблему. Хорошим примером является титульная страница https://tradingeconomics.com.

При полном просмотре на моем Macbook Pro на этой странице отображаются двенадцать столбцов данных (GPD, процентная ставка, ..., население), по одному на каждую страну. По мере сужения окна браузера (то есть имитации мобильного устройства, такого как iPad или iPhone), отдельные столбцы постепенно уменьшаются - с 12 до 10, а затем до 4. Что происходит с выпадающими столбцами? Они появляются в отдельной таблице.

Еще одна вещь, на которую следует обратить внимание, - это очевидное использование кнопки «больше» для отображения полного набора строк (списка стран), так что пользователи на мобильном устройстве изначально представлены с управляемым количеством строк.

За прошедшие годы я видел различные замечательные сайты и книги (например, посвященные таблицам данных и UX), в которых обсуждается, как другие решают те же проблемы, что и у вас сейчас, но я не буду давать никаких рекомендаций, поскольку методы будут зависеть от ваших потребностей дизайна.

Как только вы посмотрите, как другие сайты решают проблемы дизайна, учитывая их конкретные данные, технический вопрос о том, как этого добиться (например, с помощью тем Semantic UI CSS или других методов), будет легче определить.

Answer 2

вы можете использовать отзывчивый тег, чтобы сделать вашу страницу отзывчивой для каждого инструмента. как это:

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>
);