General
Overall design and UI we want to look like this screenshot - I understand it won’t look exactly like this, but at least you have the style we’re aiming for.
Detailed styles that aren’t shown here you can copy Airtable, I clarify each component in the sections below.
01 - Headers
As close as airtable as we can get it - unless there are small details that require heavy dev work then let me know Icons of the field on the header - see icons in the Field Types section in the Phase 2 Data Table doc - you can use whatever icons that are close to those, doesn’t need to be exactly what I have in the doc You can leave the sort function you already have in there on the headers Right click the header to open that columns settings Can make it as close as Airtable as possible Double Click Header to rename Header - Just like Airtable
02 - Columns
As close to airtable as possible button to create new column Drop down like how it is in Airtable We can do without the field description for MVP If possible - can we freeze the first column like you called out on the call? If we do, note that airtable has a light shadow pop up on the column line to indicate it is the primary column - this only pops up when freezed column is moving
03 - Rows & Cells
Let’s keep it as close to airtable as possible If adding numbers is trivial let's add that in Cell editing as close as possible to Airtable These fields let’s make these fields one click to edit it, for example you click on the status once to use the drop down, one click to open the date picker etc..date - if you have to click to highlight the row first then click to edit that is okay For Text field you click twice, once selects the field and the second to edit it just like in Airtable For the creative field let’s make it where you can click on an edit pencil to rename it or click the name in the cell to open up the side drawer - watch video below for reference Please make the text field as close as possible to Airtable Quick video overview of cell editing for all fields
Open up the creative field / just like in airtable how you open up Video context for opening the side drawer
Adjust row height and width which I think you already did Status, Select & Multi-Select have color options - just like airtable To clarify - the reason we have a ‘status’ field separate from select is because we need a stats field that will tie to the assets and automation Just like airtable - drag the order of views 04 - Grouping
Grouping to look as close to Airtable as possible Show the field name it is grouping for each section like this screenshot Just how it works in airtable - when you create You can create records in each group and it will automatically apply the field that it is grouped by - just like Airtable 05 - Views
Views are just like airtable except we don’t need ‘favorites’ for MVP In the drop-down settings for the views keep: Need to have a ‘create view +’ button somewhere, can be underneath the list of views The ability to drag up and down the order of views
06 - Views with Filters
Just like how airtable works, when there is a view that has specific filters, when you create a new record in that view, it automatically applies that filter This is important because separate views will be useless without this, most people will create a separate view, make a filter like ‘creative types = Meta (select field)’ then hide that field so it looks like a new table that has separate data than the other views
Filter Field Options
For MVP let’s just have these fields below auto-apply filter when creating a new record with that filter applied
07 - Scrolling / No Pagination
I noticed in your loom there was pagination for the data table which isn’t like airtable or in the figma Let me know if it’s possible to make it an endless scroll like airtable & google sheets both side to side & up and down
