styled MUI data grid #17
Conversation
.DS_Store
Outdated
There was a problem hiding this comment.
This is a mac specific file that doesn't need to be in the repo
| import { Box, Stack, Button } from '@mui/material'; | ||
| import { alpha, createTheme, styled } from '@mui/material/styles'; | ||
|
|
||
| const theme = createTheme({ |
There was a problem hiding this comment.
Let's hold off on theme colors for now as it will be something we implement globally once we have a color palette from Ruby.
| @@ -0,0 +1,118 @@ | |||
| import { GetAllLexEntriesQuery, useGetAllLexEntriesQuery } from '../graphql/lexicon/lexicon.ts'; | |||
| import { DataGrid, GridColDef,DataGridProps } from '@mui/x-data-grid'; | |||
| import React, { useState } from 'react'; | |||
There was a problem hiding this comment.
React is an unused import
| headerName: 'Primary', | ||
| width: 200, | ||
| headerAlign: 'center', | ||
| headerClassName: 'boldHeader' |
There was a problem hiding this comment.
This classname is never defined so I don't think this does anything
There was a problem hiding this comment.
oh yeah I was trying to make the headers bold, but it is not working so I will remove it, definitely not a priority right now
| ]; | ||
|
|
||
|
|
||
| const LexiconTable = () => { |
There was a problem hiding this comment.
You are on the right track here but I think it will be much easier to adapt the crud datagrid example from the MUI docs to our needs, rather than trying to code our own solution from scratch. I would recommend starting with the example at https://mui.com/x/react-data-grid/editing/ and editing it where necessary to handle our data. I think it should be as simple as just changing the GridColDef and adding in the query for the lexicon data.
There was a problem hiding this comment.
Yea having the implementation follow the CRUD sample will make life easier. This is pretty close.
Just to add some pointed areas to have this implementation match the sample.
- Having the "Add Row" button as part of the
DataGridslotproperty like in the demo and removing the "Remove Row` button - Having the "Action" column to handle things like having an edit and delete buttons.
There was a problem hiding this comment.
Did some research and these are autogenerated by tsc and don't need to be pushed.
| } | ||
| }) | ||
| const StyledDataGrid = styled(DataGrid)<DataGridProps>(({ theme }) => ({ | ||
| '&.MuiDataGrid-root': { |
There was a problem hiding this comment.
I'd recommend removing the custom CSS. We should be able to get the functionality we want with the Global theme when the time comes
| </Button> | ||
| </Stack> | ||
|
|
||
| <div style={{display:'flex', flexDirection: 'column', width: '100%'}}> |
There was a problem hiding this comment.
Instead of using a div, I recommend using a Box or similar. Then the container will follow the theme provided settings at the global level.
| ]; | ||
|
|
||
|
|
||
| const LexiconTable = () => { |
There was a problem hiding this comment.
Yea having the implementation follow the CRUD sample will make life easier. This is pretty close.
Just to add some pointed areas to have this implementation match the sample.
- Having the "Add Row" button as part of the
DataGridslotproperty like in the demo and removing the "Remove Row` button - Having the "Action" column to handle things like having an edit and delete buttons.
|
see most recent changes in lexicon table branch |
hrprice
force-pushed
the
lexicon-table
branch
from
d74b5d2
to
2e63df7
Compare
styled MUI data grid