diff options
| -rw-r--r-- | src/components/ListTable.tsx | 37 | ||||
| -rw-r--r-- | src/index.tsx | 17 |
2 files changed, 54 insertions, 0 deletions
diff --git a/src/components/ListTable.tsx b/src/components/ListTable.tsx new file mode 100644 index 0000000..5d899e0 --- /dev/null +++ b/src/components/ListTable.tsx @@ -0,0 +1,37 @@ +import React from 'react'; + +interface Field { + key: string; + label: string; +} + +interface Props { + items: any[]; + fields: Field[]; + handleRowClick?: (index: number) => any; +} + + +const ListTable: React.FC<Props> = ({ children, items, fields, handleRowClick = () => {} }) => { + return ( + <table className="m-2 table-auto w-full"> + <thead> + <tr className="border-b select-none"> + {fields.map(field => <th>{field.label}</th>)} + </tr> + </thead> + <tbody> + {items.map((item, index) => ( + <tr + className={`border-b hover:bg-gray-100 cursor-pointer ${index % 2 && 'bg-gray-50'}`} + onClick={() => handleRowClick(index)} + > + {fields.map(field => <td className="p-3">{item[field.key]}</td>)} + </tr> + ))} + </tbody> + </table> + ); +}; + +export default ListTable; diff --git a/src/index.tsx b/src/index.tsx index 779f0d0..4c354f4 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -4,12 +4,28 @@ import 'tailwindcss/tailwind.css'; import Paper from './components/Paper'; import Header from './components/Header'; import Button from './components/Button'; +import ListTable from './components/ListTable'; const navigation = [ { name: 'Главная', route: '/'}, { name: 'Товары', route: '/products'} ]; +const fields = [ + { key: '_id', label: 'ID' }, + { key: 'name', label: 'Название' }, + { key: 'type', label: 'Тип' }, +]; + +const items = [ + { _id: 1, name: 'Товар 1', type: 'Кондиционер' }, + { _id: 2, name: 'Товар 2', type: 'Кондиционер' }, + { _id: 3, name: 'Товар 3', type: 'Кондиционер' }, + { _id: 4, name: 'Товар 4', type: 'Кондиционер' }, + { _id: 5, name: 'Товар 5', type: 'Кондиционер' }, + { _id: 6, name: 'Товар 6', type: 'Кондиционер' }, +]; + const App: React.FC = () => ( <> <Header navigation={navigation} /> @@ -19,6 +35,7 @@ const App: React.FC = () => ( <Button>Нажми меня</Button> <Button variant="outlined">Отменить</Button> </p> + <ListTable items={items} fields={fields} /> </Paper> </> ); |