Material-ui: [Таблица] Фиксация головки в материале

Созданный на 16 апр. 2017  ·  32Комментарии  ·  Источник: mui-org/material-ui

Для крепежного стола Головка в материале 1.0.0 11 альфа

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

Версии

  • Материал-пользовательский интерфейс: 1.0.0-альфа 11
  • Реагировать: 15.4.2
Table enhancement important

Самый полезный комментарий

Следует отметить, что заголовок может быть липким:

// ...

  head: {
    backgroundColor: "#fff",
    position: "sticky",
    top: 0
  }

// ...

        <TableHead>
          <TableRow>
            <TableCell className={classes.head}>

// ...

https://codesandbox.io/s/k0vwm7xpl3

Все 32 Комментарий

Сегодня я столкнулся с той же проблемой. В версии 0.15 была поддержка fixedHeader , а в версии 1.x ее нет. Я предполагаю, что есть планы по его внедрению.

Та же проблема с Material-ui v1.0.0-beta.16 .

Было бы очень здорово вернуть эту функцию!

Та же проблема с Material-ui v1.0.0-beta.33

Это обязательная функция! Я думаю, что любой, кто работает с сетками данных, согласится со мной.

@mariorubinas Если эта функция важна для вас, подумайте о том, чтобы отправить PR. Вы можете использовать этот вопрос, если хотите обсудить свой подход.

Это обязательная функция!! функция отлично работала в старой версии MUI.

@asrane С нетерпением жду вашего запроса на включение.

Эй , @mbrookes, я достаточно использую фиксированный заголовок и, как и все остальное в 1.0, достаточно, чтобы попробовать это — есть ли у вас / организации Material-UI предпочтительный способ исправления заголовков таблиц? Старый fixedHeader был великолепен, но я не был большим поклонником того, как он сделал все столбцы одинаковой ширины ( table-layout: fixed; ), поэтому я собирался попытаться повторно реализовать его для поддержки динамическая ширина столбца.

@tambling Было бы здорово! поддержка динамической ширины столбцов была бы идеальной.

Следует отметить, что заголовок может быть липким:

// ...

  head: {
    backgroundColor: "#fff",
    position: "sticky",
    top: 0
  }

// ...

        <TableHead>
          <TableRow>
            <TableCell className={classes.head}>

// ...

https://codesandbox.io/s/k0vwm7xpl3

@oliviertassinari Спасибо, это работает.

@oliviertassinari Кнопки в ячейке таблицы перекрывают заголовок таблицы. Как это решить?
https://codesandbox.io/s/qx24l9vrz6

@pranayyelugam Вам нужно будет настроить zIndex для ваших кнопок.

@mbrookes Каким должно быть значение zIndex, чтобы кнопки отображались и работали правильно?
Вот демо
https://codesandbox.io/s/qx24l9vrz6

@pranayyelugam , вы можете легко установить z-индекс на липком заголовке, и он будет иметь ожидаемый результат.

head: {
    backgroundColor: "#fff",
    position: "sticky",
    top: 0,
    zIndex: 10,
  }

Для целей сравнительного анализа: https://vuematerial.io/components/table.

@oliviertassinari , это не будет работать в IE 11, верно? Технически Material UI поддерживает IE 11. Есть ли решение, которое будет работать с IE 11?

У кого-нибудь есть решение для исправления заголовка таблицы внутри компонента <Dialog> ? position: sticky не работает.

Кажется, не работает в Chrome

У меня есть фиксированный заголовок в этом компоненте: https://github.com/SurLaTable/slt-ui/blob/develop/src/ComparisonChart/ComparisonTable/ComparisonTable.js

Интерфейс материала 3.xx!

Все еще нет фиксированного заголовка? ИМО его важная особенность ..)

Удар!

Любая идея об этом? Я использую таблицу материалов, но не могу исправить заголовок, когда появляется прокрутка.

Просто используйте две таблицы, как в моем примере, @mhidalgop.

Просто используйте две таблицы, как в моем примере, @mhidalgop.

Извините, но мне это не подходит :(

Извините, но мне это не подходит :(

@mhidalgop , не могли бы вы поделиться своим примером в чем-то вроде CodeSandbox?

Наконец, я решил свою проблему, используя это решение:

head: {
    backgroundColor: "#fff",
    position: "sticky",
    top: 0,
    zIndex: 10,
  }

Спасибо!
:)

Следует отметить, что заголовок может быть липким:

// ...

  head: {
    backgroundColor: "#fff",
    position: "sticky",
    top: 0
  }

// ...

        <TableHead>
          <TableRow>
            <TableCell className={classes.head}>

// ...

https://codesandbox.io/s/k0vwm7xpl3

Это нормально работает в настольном браузере, однако в мобильных браузерах это не работает.

Следует отметить, что заголовок может быть липким:

// ...

  head: {
    backgroundColor: "#fff",
    position: "sticky",
    top: 0
  }

// ...

        <TableHead>
          <TableRow>
            <TableCell className={classes.head}>

// ...

https://codesandbox.io/s/k0vwm7xpl3

Это нормально работает в настольном браузере, однако в мобильных браузерах это не работает.

Я использую это решение в веб-приложении, и на планшете с Chrome оно работает нормально.

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

+1

У меня сработало при применении этого стиля к <TableContainer>

    height: 100%;
    overflow-y: auto;
Была ли эта страница полезной?
0 / 5 - 0 рейтинги

Смежные вопросы

FranBran picture FranBran  ·  3Комментарии

ryanflorence picture ryanflorence  ·  3Комментарии

revskill10 picture revskill10  ·  3Комментарии

finaiized picture finaiized  ·  3Комментарии

sys13 picture sys13  ·  3Комментарии