Material-ui: [рддрд╛рд▓рд┐рдХрд╛] рд╕рд╛рдордЧреНрд░реА рдореЗрдВ рд╕рд┐рд░ рдлрд┐рдХреНрд╕рд┐рдВрдЧ

рдХреЛ рдирд┐рд░реНрдорд┐рдд 16 рдЕрдкреНрд░реИрд▓ 2017  ┬╖  32рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: mui-org/material-ui

рд╕рд╛рдордЧреНрд░реА рдореЗрдВ рдЯреЗрдмрд▓ рд╣реЗрдб рдлрд┐рдХреНрд╕рд┐рдВрдЧ рдХреЗ рд▓рд┐рдП 1.0.0 11 рдЕрд▓реНрдлрд╛

рдореЗрд░реЗ рдкрд╛рд╕ рд╕реНрдХреНрд░реЙрд▓рд┐рдВрдЧ рдкрдВрдХреНрддрд┐рдпреЛрдВ рд╡рд╛рд▓реА рдПрдХ рдЯреЗрдмрд▓ рд╣реИ рд▓реЗрдХрд┐рди рдореИрдВ рд╣реЗрдбрд░ рдХреЛ рдареАрдХ рдХрд░рдиреЗ рдореЗрдВ рд╕рдХреНрд╖рдо рдирд╣реАрдВ рд╣реВрдВред
рдХреНрдпрд╛ рдРрд╕рд╛ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдХреЛрдИ рд╕рдВрдкрддреНрддрд┐ рд╣реИ рдХреНрдпреЛрдВрдХрд┐ рдлрд┐рдХреНрд╕реНрдб рд╣реИрдбрд░ рд╕рд╛рдордЧреНрд░реА 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 рдкреНрд░реЛрдк рдерд╛, v 1.x рдирд╣реАрдВред рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдЗрд╕рдореЗрдВ рд╢рд╛рдорд┐рд▓ рд╣реЛрдиреЗ рдХреА рдпреЛрдЬрдирд╛ рд╣реИред

Material-ui v1.0.0-beta.16 рдХреЗ рд╕рд╛рде рднреА рдпрд╣реА рд╕рдорд╕реНрдпрд╛ рд╣реИред

рдЗрд╕ рд╕реБрд╡рд┐рдзрд╛ рдХреЛ рд╡рд╛рдкрд╕ рд▓реЗрдирд╛ рд╡рд╛рдХрдИ рдЕрдЪреНрдЫрд╛ рд╣реЛрдЧрд╛!

рд╕рд╛рдордЧреНрд░реА-рдпреВрдЖрдИ v1.0.0-рдмреАрдЯрд╛.33 . рдХреЗ рд╕рд╛рде рдПрдХ рд╣реА рд╕рдорд╕реНрдпрд╛

рдпрд╣ рдПрдХ рдЖрд╡рд╢реНрдпрдХ рд╡рд┐рд╢реЗрд╖рддрд╛ рд╣реИ! рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдбреЗрдЯрд╛ рдЧреНрд░рд┐рдб рдХреЗ рд╕рд╛рде рдХрд╛рдо рдХрд░рдиреЗ рд╡рд╛рд▓рд╛ рдХреЛрдИ рднреА рд╡реНрдпрдХреНрддрд┐ рдореБрдЭрд╕реЗ рд╕рд╣рдордд рд╣реЛрдЧрд╛ред

@mariorubinas рдпрджрд┐ рдпрд╣ рд╕реБрд╡рд┐рдзрд╛ рдЖрдкрдХреЗ рд▓рд┐рдП рдорд╣рддреНрд╡рдкреВрд░реНрдг рд╣реИ, рддреЛ рдХреГрдкрдпрд╛ рдПрдХ рдкреАрдЖрд░ рд╕рдмрдорд┐рдЯ рдХрд░рдиреЗ рдкрд░ рд╡рд┐рдЪрд╛рд░ рдХрд░реЗрдВред рдпрджрд┐ рдЖрдк рдЕрдкрдиреЗ рджреГрд╖реНрдЯрд┐рдХреЛрдг рдкрд░ рдЪрд░реНрдЪрд╛ рдХрд░рдирд╛ рдЪрд╛рд╣рддреЗ рд╣реИрдВ рддреЛ рдЖрдк рдЗрд╕ рдореБрджреНрджреЗ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред

рдпрд╣ рдПрдХ рдЖрд╡рд╢реНрдпрдХ рд╡рд┐рд╢реЗрд╖рддрд╛ рд╣реИ !! рдкреБрд░рд╛рдиреЗ рдПрдордпреВрдЖрдИ рд╕рдВрд╕реНрдХрд░рдг рдореЗрдВ рдлреАрдЪрд░ рдиреЗ рдмрд╣реБрдд рдЕрдЪреНрдЫрд╛ рдХрд╛рдо рдХрд┐рдпрд╛ред

@asrane рдЖрдкрдХреЗ рдкреБрд▓ рдЕрдиреБрд░реЛрдз рдХреА рдкреНрд░рддреАрдХреНрд╖рд╛ рдХрд░ рд░рд╣рд╛ рд╣реИред

рдЕрд░реЗ @mbrookes рдореИрдВ рдирд┐рд╢реНрдЪрд┐рдд рд╣реЗрдбрд░ рдХрд╛ рдкрд░реНрдпрд╛рдкреНрдд рдЙрдкрдпреЛрдЧ рдХрд░рддрд╛ рд╣реВрдВ рдФрд░ рдмрд╛рдХреА рд╕рдм рдХреБрдЫ 1.0 рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдкрд░реНрдпрд╛рдкреНрдд рд╣реИ рдХрд┐ рдореИрдВ рдЗрд╕ рдкрд░ рдПрдХ рд╕реНрдЯреИрдм рд▓реЗрдиреЗ рдЬрд╛ рд░рд╣рд╛ рд╣реВрдВ - рдХреНрдпрд╛ рдЖрдкрдХреЗ / рд╕рд╛рдордЧреНрд░реА-рдпреВрдЖрдИ рд╕рдВрдЧрдарди рдХреЗ рдкрд╛рд╕ рдЯреЗрдмрд▓ рд╣реЗрдбрд░ рдХреЛ рдареАрдХ рдХрд░рдиреЗ рдХрд╛ рдкрд╕рдВрджреАрджрд╛ рддрд░реАрдХрд╛ рд╣реИ? рдкреБрд░рд╛рдирд╛ 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-index рд╕реЗрдЯ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ рдФрд░ рдЗрд╕рдХрд╛ рдЕрдкреЗрдХреНрд╖рд┐рдд рдкрд░рд┐рдгрд╛рдо рдЖрдк рдЪрд╛рд╣рддреЗ рд╣реИрдВред

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

рдмреЗрдВрдЪрдорд╛рд░реНрдХрд┐рдВрдЧ рдЙрджреНрджреЗрд╢реНрдпреЛрдВ рдХреЗ рд▓рд┐рдП: https://vuematerial.io/components/tableред

@oliviertassinari , рдЬреЛ рдЖрдИрдИ 11 рдкрд░ рдХрд╛рдо рдирд╣реАрдВ рдХрд░реЗрдЧрд╛, рд╣реИ рдирд╛? рддрдХрдиреАрдХреА рд░реВрдк рд╕реЗ рд╕рд╛рдордЧреНрд░реА UI IE 11 рдХрд╛ рд╕рдорд░реНрдерди рдХрд░рддрд╛ рд╣реИред рдХреНрдпрд╛ рдХреЛрдИ рд╕рдорд╛рдзрд╛рди рд╣реИ рдЬреЛ IE 11 рдХреЗ рд╕рд╛рде рдХрд╛рдо рдХрд░реЗрдЧрд╛?

рдХреНрдпрд╛ рдХрд┐рд╕реА рдХреЗ рдкрд╛рд╕ <Dialog> рдШрдЯрдХ рдХреЗ рдЕрдВрджрд░ рддрд╛рд▓рд┐рдХрд╛ рдХреЗ рд╢реАрд░реНрд╖рд▓реЗрдЦ рдХреЛ рдареАрдХ рдХрд░рдиреЗ рдХрд╛ рдХреЛрдИ рд╕рдорд╛рдзрд╛рди рд╣реИ? position: sticky рдХрд╛рдо рдирд╣реАрдВ рдХрд░ рд░рд╣рд╛ рд╣реИред

рдРрд╕рд╛ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдХреНрд░реЛрдо рдкрд░ рдХрд╛рдо рдирд╣реАрдВ рдХрд░ рд░рд╣рд╛ рд╣реИ

рдореЗрд░реЗ рдкрд╛рд╕ рдЗрд╕ рдШрдЯрдХ рдореЗрдВ рдПрдХ рдирд┐рд╢реНрдЪрд┐рдд рд╢реАрд░реНрд╖рд▓реЗрдЦ рд╣реИ: https://github.com/SurLaTable/slt-ui/blob/develop/src/ComparisonChart/ComparisonTable/ComparisonTable.js

рд╕рд╛рдордЧреНрд░реА рдпреВрдЖрдИ 3.xx!

рдЕрднреА рднреА рдХреЛрдИ рдирд┐рд╢реНрдЪрд┐рдд рд╢реАрд░реНрд╖рд▓реЗрдЦ рдирд╣реАрдВ рд╣реИ? рдЖрдИрдПрдордУ рдЗрд╕рдХреА рдорд╣рддреНрд╡рдкреВрд░реНрдг рд╡рд┐рд╢реЗрд╖рддрд╛ ..)

рдЯрдХреНрдХрд░!

рдЗрд╕ рдмрд╛рд░реЗ рдореЗрдВ рдХреЛрдИ рд╡рд┐рдЪрд╛рд░? рдореИрдВ рд╕рд╛рдордЧреНрд░реА рддрд╛рд▓рд┐рдХрд╛ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣рд╛ рд╣реВрдВ, рд▓реЗрдХрд┐рди рдЬрдм рд╕реНрдХреНрд░реЙрд▓ рджрд┐рдЦрд╛рдИ рджреЗрддрд╛ рд╣реИ рддреЛ рдореИрдВ рд╢реАрд░реНрд╖рд▓реЗрдЦ рдХреЛ рдареАрдХ рдХрд░рдиреЗ рдореЗрдВ рд╕рдХреНрд╖рдо рдирд╣реАрдВ рд╣реВрдВред

рдореЗрд░реЗ рдЙрджрд╛рд╣рд░рдг рдореЗрдВ, @mhidalgop рдЬреИрд╕реЗ рджреЛ рддрд╛рд▓рд┐рдХрд╛рдУрдВ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░реЗрдВред

рдореЗрд░реЗ рдЙрджрд╛рд╣рд░рдг рдореЗрдВ, @mhidalgop рдЬреИрд╕реЗ рджреЛ рддрд╛рд▓рд┐рдХрд╛рдУрдВ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░реЗрдВред

рдХреНрд╖рдорд╛ рдХрд░реЗрдВ, рд▓реЗрдХрд┐рди рдпрд╣ рдореЗрд░реЗ рд▓рд┐рдП рдХрд╛рдо рдирд╣реАрдВ рдХрд░ рд░рд╣рд╛ рд╣реИ :(

рдХреНрд╖рдорд╛ рдХрд░реЗрдВ, рд▓реЗрдХрд┐рди рдпрд╣ рдореЗрд░реЗ рд▓рд┐рдП рдХрд╛рдо рдирд╣реАрдВ рдХрд░ рд░рд╣рд╛ рд╣реИ :(

@mhidalgop , рдХреЛрдбрд╕реИрдВрдбрдмреЙрдХреНрд╕ рдЬреИрд╕реА рдХрд┐рд╕реА рдЪреАрдЬрд╝ рдореЗрдВ рдЕрдкрдирд╛ рдЙрджрд╛рд╣рд░рдг рд╕рд╛рдЭрд╛ рдХрд░рдиреЗ рдХрд╛ рдорди?

рдЕрдВрдд рдореЗрдВ рдореИрдВрдиреЗ рдЗрд╕ рд╕рдорд╛рдзрд╛рди рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдЕрдкрдиреА рд╕рдорд╕реНрдпрд╛ рдХрд╛ рд╕рдорд╛рдзрд╛рди рдХрд░ рд▓рд┐рдпрд╛ рд╣реИ:

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

Thxs!
:)

рдзреНрдпрд╛рди рджреЗрдиреЗ рдпреЛрдЧреНрдп рдмрд╛рдд рдпрд╣ рд╣реИ рдХрд┐ рд╣реЗрдбрд░ рдХреЛ рд╕реНрдЯрд┐рдХреА рдкреЛрдЬреАрд╢рди рдореЗрдВ рд░рдЦрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИ:

// ...

  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

рдпрд╣ рдбреЗрд╕реНрдХрдЯреЙрдк рдмреНрд░рд╛рдЙрдЬрд╝рд░ рдкрд░ рдареАрдХ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ, рд╣рд╛рд▓рд╛рдВрдХрд┐ рдореЛрдмрд╛рдЗрд▓ рдмреНрд░рд╛рдЙрдЬрд╝рд░ рдкрд░ рдпрд╣ рдХрд╛рдо рдирд╣реАрдВ рдХрд░рддрд╛ рд╣реИред

рдореИрдВ рдЗрд╕ рд╕рдорд╛рдзрд╛рди рдХрд╛ рдЙрдкрдпреЛрдЧ рд╡реЗрдм рдРрдк рдореЗрдВ рдХрд░ рд░рд╣рд╛ рд╣реВрдВ, рдФрд░ рдХреНрд░реЛрдо рд╡рд╛рд▓реЗ рдЯреИрдмрд▓реЗрдЯ рдореЗрдВ рдпрд╣ рдареАрдХ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИред

рдЪрд┐рдкрдЪрд┐рдкрд╛ рдореЗрд░реЗ рд▓рд┐рдП рдХрд╛рдо рдирд╣реАрдВ рдХрд░рддрд╛ рд╣реИ, рдЗрд╕рд▓рд┐рдП рдЯреЗрдмрд▓ рд╣реЗрдбрд░ рдХреЛ рдареАрдХ рдХрд░рдиреЗ рдХреЗ рддрд░реАрдХреЗ рдкрд░ рдХреЛрдИ рдЕрдиреНрдп рд╕рдорд╛рдзрд╛рди?

+1

рдЗрд╕ рд╢реИрд▓реА рдХреЛ <TableContainer> . рдкрд░ рд▓рд╛рдЧреВ рдХрд░рддреЗ рд╕рдордп рдореЗрд░реЗ рд▓рд┐рдП рдХрд╛рдо рдХрд┐рдпрд╛

    height: 100%;
    overflow-y: auto;
рдХреНрдпрд╛ рдпрд╣ рдкреГрд╖реНрда рдЙрдкрдпреЛрдЧреА рдерд╛?
0 / 5 - 0 рд░реЗрдЯрд┐рдВрдЧреНрд╕

рд╕рдВрдмрдВрдзрд┐рдд рдореБрджреНрджреЛрдВ

amcasey picture amcasey  ┬╖  70рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

darkowic picture darkowic  ┬╖  62рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

illogikal picture illogikal  ┬╖  75рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

tleunen picture tleunen  ┬╖  59рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

kybarg picture kybarg  ┬╖  164рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ