Transcript

00:00 good day everyone Welcome to our quick
00:01 demo of feeds table Pro let's dive into
00:04 what feeds table Pro is all about feeds
00:07 table Pro is a stack that lets you take
00:09 data from feeds and display it in an
00:11 HTML table while it's essentially an
00:13 HTML table stack its true power comes
00:16 when you connect it to data sources via
00:19 Weaver space's feed stack feeds by
00:21 Weaver space allows you to connect to
00:23 multiple data sources like CSV RSS Json
00:27 or total CMS right out of the box with
00:30 additional database packs you can even
00:32 connect to myql Maria DB sqlite in SQL
00:37 Server
00:38 databases I created feeds table Pro to
00:40 provide a clean customizable interface
00:42 for displaying data you can customize
00:45 column names manage data and add simple
00:47 sorting and searching
00:49 capabilities let's start by setting up a
00:51 simple HTML table drag feeds table Pro
00:54 to your page you'll see it comes with a
00:57 header row cell here you can add headers
00:59 like name
01:03 name
01:07 date age and favorite
01:12 color now let's add some rows to the
01:15 table for now we're not going to connect
01:17 any feeds instead we'll manually add a
01:20 row and fill in some
01:28 data once we preview it you'll see we
01:31 have a simple table with a header and
01:33 one row of
01:35 data let's duplicate the row and change
01:38 some of the data to have a demo
01:45 table here you can see we've added some
01:47 table data manually this data isn't
01:50 connected to any feeds it's been entered
01:52 manually while this approach isn't ideal
01:55 for larger data sets it's one use case
01:57 for feeds table Pro feeds table Pro also
02:01 supports search and sort
02:03 functionality by enabling these features
02:05 you can sort by any data in the columns
02:07 let's add the feeds table Pro search
02:09 stack to the page right from the start
02:12 it's important to note that feeds table
02:14 Pro assigns a table ID to each table and
02:17 the search stack also has a
02:19 corresponding table ID you can have
02:21 multiple tables on a page but each one
02:24 must have a unique ID a search field
02:27 will only work with the table that
02:28 shares its ID
02:33 for example if the table ID is seven the
02:35 search stack should also have an ID of
02:39 seven now let's preview the
02:41 data now we have a search feature what's
02:44 great about it is that you can enter
02:46 multiple search queries and it searches
02:52 instantly for example if you search
02:55 Joshua the results appear immediately if
02:58 you then search for July it filters the
03:00 entries to show only those from July you
03:03 can even search John to narrow it down
03:07 further you can sort by
03:11 name and feeds table Pro also supports
03:14 sorting by date it automatically detects
03:17 date fields and arranges them in
03:18 calendar
03:21 order and of course you can arrange by
03:23 numbers as
03:25 well if you arrange the color column
03:27 it'll be back to alphabetical
03:31 now let's load some Dynamic data by
03:33 adding a feed
03:36 stack we will then add a row into the
03:38 feed stack Drop Zone
03:42 area I am just going to steal this CSV
03:45 data source with some demo data in it
03:47 ready to
03:49 use then let's remove these headers and
03:52 add the headers from the CSV header Row
03:54 in the demo data
04:01 next we need to add six
04:03 cells the feeds macros use double curly
04:07 braces around the column ID like
04:13 this we've set up the headers and Define
04:16 the macros if you've used feeds before
04:19 this will be familiar these macros will
04:21 connect the data from the database into
04:23 this
04:24 row now let's take a look at our data
04:27 perfect as you can see we now have a
04:30 table populated with data we can sort by
04:32 dates salary email country age and name
04:37 currently we can't sort the data by last
04:39 name only by first name however with the
04:42 power of feeds and feeds table Pro we
04:44 can make some changes to enable that
04:46 we'll explore that shortly the search
04:48 function is excellent for example if you
04:51 want to search by age you can type in 3
74:54 to see all the 37 year olds if you
04:56 search by country like UK it will
04:58 display relevant Eng R note that it also
05:01 searches within other data points like
05:03 2022 and it will filter that out from
05:06 the date column even after filtering
05:08 your data through a search you can still
05:10 sort the remaining rows by the data
05:12 that's
05:13 left to bring back the data simply clear
05:16 the search field or reload the page now
05:18 let's look at formatting the data we
05:20 want to format currency and split the
05:22 first and last names into separate
05:23 columns using the power of twig and
05:25 feeds we can customize how this data is
05:28 displayed in feeds table Pro first we'll
05:30 create a second header cell so that we
05:32 have separate columns for first name and
05:35 last name now I'm going to copy a
05:37 pre-made twig statement to speed up the
05:39 process this statement takes the data
05:41 from the name column and splits it into
05:43 separate first name and last name
05:45 columns next we'll update the macro in
05:47 the first row cell to first name then
05:50 duplicate this cell to create a last
05:52 name cell when we preview the table
05:54 you'll see that the first name and last
05:56 name have been split from the original
05:58 data in the the database it's still a
06:00 single field but with feeds and feeds
06:03 table Pro we've separated them into
06:05 individual columns now you can sort by
06:08 both last name and first name making
06:10 this a powerful way to display and
06:12 organize your data next let's format the
06:15 salary I'll use a pre-made macro from
06:17 another screen this macro adds a dollar
06:20 sign before the salary value and then
06:22 formats the number as currency using
06:24 twig let's see how that looks now
06:27 originally the table contained raw
06:28 numeric data but with twig we formatted
06:31 it directly within the table this shows
06:34 how we can manipulate data outside of
06:36 the database which is a major advantage
06:38 of using feeds the beauty of feeds table
06:41 Pro is that it can still sort and search
06:43 this formatted data for example you can
06:46 search for a specific amount like
06:48 $50,000 or filter data by years such as
06:51 2021 2022 2023 or 2024 now let's explore
06:57 some additional features available to
06:59 you
07:00 as we review the table we notice that
07:02 the first name and last name columns
07:04 have more space than needed to optimize
07:07 this we can adjust the column widths
07:09 here's how we do it we'll add a column
07:11 width setting since we're only adjusting
07:14 the first name and last name columns we
07:16 only need to modify the first two
07:17 columns we'll change the width from Auto
07:20 to a specific value let's start with 15
07:23 pixels after previewing we can fine-tune
07:26 it if 100 pixels is too small we'll try
07:29 100 110 pixels which is almost perfect
07:32 we'll continue adjusting until it looks
07:34 just right once the first name column is
07:37 set we'll do the same for the last name
07:39 column setting it to 11
57:43 pixels now that we've set the width for
07:45 the last name column let's consider
07:47 making the date column narrower as well
07:50 the date is in column 7 so we need to
07:52 adjust that specific column while
07:54 leaving the others set to Auto we'll
07:56 start by setting the width to 200 pixels
07:58 but that's too wide so we'll try 10
08:01 pixels that's a bit too small so let's
08:03 adjust it to 120 pixels perfect 12
08:07 looks just
08:08 right if we set the preview window to
08:11 manual adjustment and start collapsing
08:13 the table you'll notice that the data
08:15 begins to line break which disrupts our
08:18 rows we can prevent this by setting a
08:20 minimum width for the table for example
08:23 around 877 pixels is where the table
08:25 starts to break so we'll set the minimum
08:28 width to 87 70 pixels after applying
08:31 this setting in feeds table Pro the
08:33 table maintains its structure and
08:35 doesn't break even when the window is
08:37 resized what's really cool is that the
08:40 data becomes scrollable within the table
08:42 itself if you scroll down you'll see a
08:45 scroll bar but the search bar at the top
08:47 remains unaffected you're only scrolling
08:50 within the table this feature ensures
08:52 that your data and table layout look
08:54 good on smaller devices it also means
08:57 you can still use the search and filter
08:58 functions effectively on mobile devices
09:01 if you're a foundation 6 user you have
09:03 the ability to stylize your table using
09:05 table styles to do this we'll apply a
09:08 parent class to The Container which
09:10 we'll call styles from here we can use
09:13 the Swatch to adjust everything from the
09:15 table header and body settings to text
09:18 size and more for instance if you want
09:20 to make the text smaller you can easily
09:23 do
09:28 that you can also adjust the header text
09:31 size or change the text weight to bold
09:34 this flexibility allows you to create
09:35 smaller tables with smaller text if
09:37 needed Additionally you can fully
09:39 customize the table's background in
09:41 other Style Elements while my example
09:43 may be a bit extreme it demonstrates the
09:46 range of customization options available
09:49 overall feeds table Pro is a powerful
09:51 stack that gives you extensive control
09:53 over how you format and present your
09:55 data there are also alignment settings
09:58 for header rows body rows header cells
10:00 and row cells use these settings as
10:03 needed to create beautifully customized
10:05 tables for your Web projects with these
10:07 simple yet powerful features feeds table
10:10 Pro combined with the power of feeds
10:12 enables you to display sort and search
10:15 your database data quickly cleanly and
10:18 efficiently thank you for watching this
10:20 video I hope you'll consider picking up
10:22 feeds table Pro today to power your next
10:24 database table
10:30 n