рдореЗрд░реЗ рдкрд╛рд╕ рд╕реНрдХреНрд░реЙрд▓рд┐рдВрдЧ рдкрдВрдХреНрддрд┐рдпреЛрдВ рд╡рд╛рд▓реА рдПрдХ рдЯреЗрдмрд▓ рд╣реИ рд▓реЗрдХрд┐рди рдореИрдВ рд╣реЗрдбрд░ рдХреЛ рдареАрдХ рдХрд░рдиреЗ рдореЗрдВ рд╕рдХреНрд╖рдо рдирд╣реАрдВ рд╣реВрдВред
рдХреНрдпрд╛ рдРрд╕рд╛ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдХреЛрдИ рд╕рдВрдкрддреНрддрд┐ рд╣реИ рдХреНрдпреЛрдВрдХрд┐ рдлрд┐рдХреНрд╕реНрдб рд╣реИрдбрд░ рд╕рд╛рдордЧреНрд░реА 0.15 рдФрд░ рдКрдкрд░ рдерд╛ рд▓реЗрдХрд┐рди 1.0.0 рд╕рдВрд╕реНрдХрд░рдг рдореЗрдВ рдРрд╕рд╛ рдХреБрдЫ рдирд╣реАрдВ рд▓рдЧрддрд╛ рд╣реИ
рдореИрдВ рдЖрдЬ рдЙрд╕реА рдореБрджреНрджреЗ рдореЗрдВ рднрд╛рдЧ рдЧрдпрд╛ред рд╕рдВрд╕реНрдХрд░рдг 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}>
// ...
@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}> // ...
рдпрд╣ рдбреЗрд╕реНрдХрдЯреЙрдк рдмреНрд░рд╛рдЙрдЬрд╝рд░ рдкрд░ рдареАрдХ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ, рд╣рд╛рд▓рд╛рдВрдХрд┐ рдореЛрдмрд╛рдЗрд▓ рдмреНрд░рд╛рдЙрдЬрд╝рд░ рдкрд░ рдпрд╣ рдХрд╛рдо рдирд╣реАрдВ рдХрд░рддрд╛ рд╣реИред
рдзреНрдпрд╛рди рджреЗрдиреЗ рдпреЛрдЧреНрдп рдмрд╛рдд рдпрд╣ рд╣реИ рдХрд┐ рд╣реЗрдбрд░ рдХреЛ рд╕реНрдЯрд┐рдХреА рдкреЛрдЬреАрд╢рди рдореЗрдВ рд░рдЦрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИ:
// ... head: { backgroundColor: "#fff", position: "sticky", top: 0 } // ... <TableHead> <TableRow> <TableCell className={classes.head}> // ...
рдпрд╣ рдбреЗрд╕реНрдХрдЯреЙрдк рдмреНрд░рд╛рдЙрдЬрд╝рд░ рдкрд░ рдареАрдХ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ, рд╣рд╛рд▓рд╛рдВрдХрд┐ рдореЛрдмрд╛рдЗрд▓ рдмреНрд░рд╛рдЙрдЬрд╝рд░ рдкрд░ рдпрд╣ рдХрд╛рдо рдирд╣реАрдВ рдХрд░рддрд╛ рд╣реИред
рдореИрдВ рдЗрд╕ рд╕рдорд╛рдзрд╛рди рдХрд╛ рдЙрдкрдпреЛрдЧ рд╡реЗрдм рдРрдк рдореЗрдВ рдХрд░ рд░рд╣рд╛ рд╣реВрдВ, рдФрд░ рдХреНрд░реЛрдо рд╡рд╛рд▓реЗ рдЯреИрдмрд▓реЗрдЯ рдореЗрдВ рдпрд╣ рдареАрдХ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИред
рдЪрд┐рдкрдЪрд┐рдкрд╛ рдореЗрд░реЗ рд▓рд┐рдП рдХрд╛рдо рдирд╣реАрдВ рдХрд░рддрд╛ рд╣реИ, рдЗрд╕рд▓рд┐рдП рдЯреЗрдмрд▓ рд╣реЗрдбрд░ рдХреЛ рдареАрдХ рдХрд░рдиреЗ рдХреЗ рддрд░реАрдХреЗ рдкрд░ рдХреЛрдИ рдЕрдиреНрдп рд╕рдорд╛рдзрд╛рди?
+1
рдЗрд╕ рд╢реИрд▓реА рдХреЛ <TableContainer>
. рдкрд░ рд▓рд╛рдЧреВ рдХрд░рддреЗ рд╕рдордп рдореЗрд░реЗ рд▓рд┐рдП рдХрд╛рдо рдХрд┐рдпрд╛
height: 100%;
overflow-y: auto;
рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА
рдзреНрдпрд╛рди рджреЗрдиреЗ рдпреЛрдЧреНрдп рдмрд╛рдд рдпрд╣ рд╣реИ рдХрд┐ рд╣реЗрдбрд░ рдХреЛ рд╕реНрдЯрд┐рдХреА рдкреЛрдЬреАрд╢рди рдореЗрдВ рд░рдЦрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИ:
https://codesandbox.io/s/k0vwm7xpl3