react-fastest-tables v1.0.3
��# r e a c t - f a s t e s t - t a b l e s
W e l c o m e t o t h i s c o m p o n e n t .
# # # H o w T o I n s t a l l
F i r s t o f a l l t h i s c o m p o n e n t n e e d s T a i l w i n d C S S . P l e a s e s e e h o w t o i n s t a l l T a i l w i n d C S S h e r e ( h t t p s : / / t a i l w i n d c s s . c o m / d o c s / i n s t a l l a t i o n " T a i l w i n d C S S " ) .
P l e a s e t h i s c o m p o n e n t n e e d s R e a c t h o o k s o r R e a c t v e r s i o n ^ 1 7 .
T h i s p a c k a g e c a n b e i n s t a l l e d v i a N P M
J a v a s c r i p t
n p m i n s t a l l r e a c t - p r i c i n g - t a b l e - - s a v e
# # # # E x a m p l e h o w i t w o r k s .
B e l o w i s a s i m p l e c o d e o n h o w t o u s e t h e F a s t e s t T a b l e . . .
J a v a s c r i p t
i m p o r t ' . / A p p . c s s ' ;
i m p o r t R e a c t f r o m ' r e a c t ' ;
i m p o r t T a b l e f r o m " r e a c t - f a s t e s t - t a b l e s " ;
f u n c t i o n A p p ( ) {
r e t u r n (
< d i v c l a s s N a m e = " A p p " >
< T a b l e d a t a = { [ { n a m e : ' d a v i d ' , s u r n a m e : ' v i c t o r i a m a r t i n e z ' , f a v o r i t e F a s t F o o d : ' t a c o ' , d a t e : ' 0 7 - 0 7 - 2 0 2 1 1 5 : 0 0 : 0 0 ' } ] }
h e a d e r s = { [ { h e a d e r : ' n a m e ' , a c c e s s o r : ' n a m e ' , t y p e : ' s t r i n g ' } , { h e a d e r : ' s u r n a m e ' , a c c e s s o r : ' s u r n a m e ' , t y p e : ' s t r i n g ' } , { h e a d e r : ' f a v o r i t e f a s t f o o d ' , a c c e s s o r : ' f a v o r i t e F a s t F o o d ' , t y p e : ' s t r i n g ' } , { h e a d e r : ' d a t e ' , a c c e s s o r : ' d a t e ' , t y p e : ' d a t e ' , f o r m a t : ' D D - M M - Y Y Y Y h h : m m : s s ' } ] }
p a g i n a t i o n N u m b e r = { 1 0 } >
< / T a b l e >
< / d i v >
) ;
}
e x p o r t d e f a u l t A p p ;
# # # C o n f i g u r a t i o n .
T h i s s i m p l e c o d e m o u n t s a f a s t e s t t a b l e , w i t h f i l t e r s b y c o l u m n s , p a g i n a t i o n , o r d e r b y c o l u m n s o n d i f f e r e n t b y d a t e o r b y a s t r i n g .
I n t h e v e r s i o n 1 . 0 w e h a v e o n l y 3 p r o p s :
1 . D a t a : A r r a y w i t h o b j e c t s i n s i d e .
2 . H e a d e r s : A r r a y w h o h a v e a l l t h e c o n f i g u r a t i o n a b o u t t h e c o l u m n s . W e h a v e m a n y p a r t s :
2 . 1 . h e a d e r : T h i s k e y w i l l b e t h e t i t l e o f t h e c o l u m n .
2 . 2 . a c c e s s o r : T h i s k e y w i l l l o o k u p o n t h e d a t a a r r a y t o g e t t h e v a l u e .
2 . 3 . t y p e : T h i s k e y w i l l s a y w h a t t y p e o f d a t a i s i n s i d e . W e h a v e m a n y :
2 . 3 . 1 :
- s t r i n g : T h i s w i l l r e n d e r a s a t e x t
- d a t e : T h i s w i l l r e n d e r a s a d a t e , Y o u n e e d t o p a s s t h e f o r m a t t h a t t h e d a t e h a v e .
L i k e t h i s : { h e a d e r : ' d a t e ' , a c c e s s o r : ' d a t e ' , t y p e : ' d a t e ' , f o r m a t : ' D D - M M - Y Y Y Y h h : m m : s s ' }
- i n t e g e r : T h i s w i l l r e n d e r a s a n u m b e r
- i c o n . T h i s w i l l l o a d a s a p i c t u r e / i c o n .
3 . p a g i n a t i o n N u m b e r : T h i s i s t h e n u m b e r o f r e s u l t s d o y o u w a n t o n e a c h p a g e .
T h e t o p c o n f i g u r a t i o n w i l l r e n d e r :
! t o p R e n d e r ( h t t p s : / / i . i b b . c o / 6 P 5 N r 5 J / r e n d e r . p n g )
# # # L i c e n s e
C o p y r i g h t ( c ) 2 0 2 1 D a v i d V i c t o r i a M a r t i n e z L i c e n s e d u n d e r M I T l i c e n s e , s e e L I C E N S E f o r t h e f u l l l i c e n s e .